Divs render but no past data appears, React

Question

the program takes data from an api and passes through a filter that returns to the component products that should render on the screen that list, which it does but the product data is not seem.

import Cards from '../function/card';
import renderlist from '../function/renderlist'; 
import {useEffect,useState } from 'react';


function Products(){      
       useEffect(() => {fetchData()}, []);
    const [list,setlist]= useState()

    async function fetchData() {
        const res = await renderlist()
        const list = res.map((valor) =><Cards value={valor} key={valor.name}/>)
        console.log(list)
        setlist(list)
        
    }
    return(<div>{list}</div>)

}
export default Products;

the components are rendered on the screen but the data passed does not appear, the cards Components.

function Cards(unid){
    return(
    <div>
        <img alt={'aqui'} url={unid.url} ></img>
        <h1>aqui</h1>
    </div>
    )
}  

they appear on the screen with the right amount but does not appear the information passed in the parameters, just appears empty Ivs. I checked the list and it looks like a list of objects of type {$$typeof: Symbol(React.element). what appears on the user screen only the "here" the other data does not appear, but appear the span and img so that empty...

Answer 1

Only need in variable list store the result of API then use this variable to map the component Cards, example:

const data = [
  {
    url: 'https://via.placeholder.com/150.png/091/fff'
  }, 
  {
    url: 'https://via.placeholder.com/150.png/09f/fff'
  }
];
function Cards({unid}) {
    return (
      <div>
        <img alt={unid.url} src={unid.url} alt="" />        
        <h1>{unid.url}</h1>
      </div>
    )
}

function Products() {      
    const [list, setlist] = React.useState(data);
    React.useEffect(() => {
       fetchData();        
    }, []);    
    function fetchData() {
        // libera essas duas linhas
        //const list = await renderlist()
        //setList(list);
    }
    return (
      <div>{list.map((x, i) => (<Cards unid={x} /> ))}</div>
    )
}

ReactDOM.render(<Products/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root">Carregando ...</div>

It also had errors of html where the tag <img /> to show the image is by src.