I am new to React and building a movie db app. I have defined my async fetch movies api call in API.js and call this in the Home.js components' useEffect and set the result in the Home.js "trending" state and further pass this into a Grids component. Issue is Grids component always returns empty object for the trending prop passed, even when the trending state is updated. I'm not sure whats happening here. please advise

Home.js

const Home = () => {
  const { searchTerm } = useContext(SearchTermContext);
  const [trending, setTrending] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    const trendingList = async () => {
      setTrending(await fetchTrending());
      setLoading(false);
    };
    trendingList();
  }, []);

  return (
    <div className="homepage">
      <Hero />
      <p>{trending.length > 0 && trending.length},grids</p>//prints length
      correctly once state updates
      {trending.length > 0 && !loading && <Grids trending={trending} />}
    </div>
  );
};

Grids.js

const Grids = ({ heading = "What's Popular" }, trending) => {
  console.log(trending.length, "in grid"); //prints {},"in grid", even after trending state is updated
  // const thumbElements = trending?.map((item) => {
  //     return <Thumb key={item.id} item={item} />
  // });
  return (
    <div className="grid-section">
      <h3>{heading}</h3>
      <div className="thumbs">{/* {thumbElements} */}</div>
    </div>
  );
};

fetchTrending in API.js

export const fetchTrending = async (mediaType) => {
  if (sessionStorage.getItem("trending")) {
    return await JSON.parse(sessionStorage.getItem("trending"));
  } else {
    try {
      const response = await axios.get(
        `${BASE_URL}/trending/movie/day?api_key=${API_KEY}`
      );
      sessionStorage.setItem("trending", JSON.stringify(response.data.results));
      return response.data.results;
    } catch (error) {
      console.log(error);
    }
  }
};