Using fetch with async/await inside useEffect returns the data but the data is empty when called inside a component

I'm trying to fetch data from a mock JSON server using async/await inside useEffect and the data fetched is stored in a variable (Items) with useState. But I seem to have difficulty of using that data on a component (Content.js). the problem is when I console.log the variable to check for the fetched data inside App.js file I can see the data, but when I console.log the same variable inside the component, it returns [object Object],[object Object],[object Object],[object Object],[object Object]

function App() {
const API_URL = 'http://localhost:3500/Items';

const [Items, setItems] = useState([]);

console.log(Items)

useEffect(()=>{
const fetchItems = async () =>{
  try{
    const response = await fetch(API_URL);
    const listedItems = await response.json();

    console.log(listedItems);
    setItems(listedItems);
  }
  catch(err){ 
    console.log(err.message)
  }
}

  (async () => await fetchItems())();
}, []) 

return (
  <div>
    <Content
       Items = {Items}
     />
  
  </div>