Reactjs – Why isn't my fetched API data showing on my site using this code? It shows in console – react.js

Using the following code, I can see my data in the console but nothing is showing on the screen and there are no errors in the console. I assume there’s a problem in my return with the mapping but no idea what it is.

import { React, useState, useEffect } from "react";
import "./App.css";
import Card from "./Card";

function App() {
  const [data, setData] = useState([])

  let url = 'https://moviesdatabase.p.rapidapi.com/titles';


  function fetchData() { fetch(url, { method: 'Get', headers: {
    'X-RapidAPI-Key': redacted,
    'X-RapidAPI-Host': 'moviesdatabase.p.rapidapi.com'
  }})
    .then((res) => res.json())
    .then((json) => {
      console.log(json);
      setData(json);
      
    })};
  
    useEffect(() => {
      fetchData();
    }, [])

  return (
    <>
    My API <br/>
    <br />

    <div>
        {data.length && data.results.map((item) => {
          <div key={item.id}>
                <Card
                image={item.primaryImage.url}
                title={item.titleText}
                />
                </div>

})}
    </div>
    </>
  )
}

export default App

the card component code if needed:

import React from "react";

function Card(props) {
    return (
        <>
        <img src={props.image} alt={props.title} />
        <p>{props.title}</p>
        </>
    )
}

export default Card