Cannot render components after the Fetch() call.

Hi, I have a simple code which fetches data and converts it to JSON format. The converted JSON data is then stored in a useState variable. I have been trying to render a "Card" component using the useState variable with map() function. I don't get any errors, but I cannot find the "Card" component on the web page. Here's my code:

const [actualData,setactualData]=useState(null);
const myrequest= fetch(fetch_url,{
method: 'GET',
// headers: {'Access-Control-Allow-Origin':'*','Content-Type':'application/json'}
}).then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
//Actual_Data=response.json();
return response.json(); // Parse the JSON response
})
.then(data => {
setactualData(data);
console.log(actualData);
})
.catch(error => {
console.error('There was a problem with the fetch operation:', error);
});;
{
async ()=>{ await actualData.map((item,id)=>(
<Card name={item.First_Name}/>
))}
}