Javascript – Youtube API data is not storing in useState variable

I’m encountering a problem while using the YouTube API to fetch data in my React application. Although the data is successfully fetched, it doesn’t seem to be stored in the useState variable as expected. Consequently, my VideoCard component, which relies on this data, isn’t being called. How can I troubleshoot this issue and ensure that the fetched data is properly stored in the state variable?

import React, { useEffect, useState } from "react";
import { YOUTUBE_VIDEOS_API } from "../utils/constants";
import VideoCard from "./VideoCards";

const VideoContainer = () => {
  const [videos, setVideos] = useState([]);

  useEffect(() => {
    getVideos();
  }, []);

  const getVideos = async () => {
    try {
      const data = await fetch(YOUTUBE_VIDEOS_API);
      const json = await data.json();

      setVideos([...videos, ...json?.items]);
      console.log(json);
    } catch (e) {
      console.error(e);
    }
  };

  return (
    <div className="m-4 flex flex-wrap">
      {videos.map((card, index) => {
        <VideoCard key={index} card={card} />;
      })}
    </div>
  );
};

export default VideoContainer;

Outputjson: {"kind": "youtube#videoListResponse",

etag: "fQlUo5S4JJ9QA_SUhvAXezB2SHI",

items: [{…..},{…..},{…..},],

nextPageToken: "CAUQAA",

}