ReactJs - Fetching Videos from search result using Youtube API (not working)

Note: everything is running locally and it's also in a github repo

I need to make a page containing videos about a certain topic let's say baseball for this case and i tried to use youtube api to get the videos here is the code for page.jsx:

"use client";import React from 'react';import BasketballVideos from './BasketballVideos';import SoccerVideos from './SoccerVideos';import BaseballVideos from './BaseballVideos';import './page.css';const Page = () => {  const apiKey = process.env.REACT_APP_YOUTUBE_API_KEY; // Ensure this is set in your .env file  return (<div className="page-container"><h1>Fan Zone</h1><BasketballVideos apiKey={apiKey} /><SoccerVideos apiKey={apiKey} /><BaseballVideos apiKey={apiKey} />      {/* Add more sections as needed */}</div>  );};export default Page;

and here is the code for BaseballVideos.jsx (in the same directory):

import React, { useState, useEffect } from 'react';import axios from 'axios';const BaseballVideos = () => {  const [videos, setVideos] = useState([]);  const apiKey = process.env.REACT_APP_YOUTUBE_API_KEY;  useEffect(() => {    const fetchVideos = async () => {      try {        const response = await axios.get('https://www.googleapis.com/youtube/v3/search', {          params: {            part: 'snippet',            maxResults: 10,            q: 'MLB highlights',            type: 'video',            key: apiKey          }        });        setVideos(response.data.items);      } catch (error) {        console.error('Error fetching videos:', error);      }    };    fetchVideos();  }, [apiKey]);  return (<div><h2>Baseball Videos</h2><ul>        {videos.map(video => (<li key={video.id.videoId}><a href={`https://www.youtube.com/watch?v=${video.id.videoId}`} target="_blank" rel="noopener noreferrer"><img src={video.snippet.thumbnails.default.url} alt={video.snippet.title} /><p>{video.snippet.title}</p></a></li>        ))}</ul></div>  );};export default BaseballVideos;

So then i tried to run my code and the page is rendering the text headers Fan zone, BaseballVideos etc just fine but wat isn't fine is that the videos aren't being displayed and i have tried everything that i konw and i have no clue why it isn't working pleasee helpp.

This is what my console shows on the browser:
Picture of Console