Troubleshooting Empty API Response and Undefined 'items' Property in React Application

Question

I'm trying to use the rapid api website to get data for me but all my arrays keep returning empty, I keep getting these errors in my console tab console, and get this in the browser browser, i thought i had all the necessary dependencies so I dont understand why axios is an issue, dependencies, and none of my arrays return anything array. The issue only happens when I try to use useEffect to call the fetchFromAPI function. This is my file structure files. And my components involved: Feed.js:

import React, {useState, useEffect} from 'react';
import {Box, Stack, Typography} from '@mui/material'
import Sidebar from './Sidebar';
import Videos  from './Videos';
import { fetchFromAPI } from '../utils/fetchFromAPI';

const Feed = () => {

  const [selectedCategory, setSelectedCategory] = useState('New');
  const [videos, setVideos] = useState([]);

  useEffect(() => {
    fetchFromAPI(`search?part=snippet&q=${selectedCategory}`).then((data) => setVideos(data.items))
  }, [selectedCategory]);

  return ( 
    <Stack sx={{flexDirection: {sx: 'column', md: 'row'}}}>
      <Box sx={{height: { sx:'auto', md: '92vh'}, 
      borderRight: '1px solid #3d3d3d', px: {sx:0, md: 2}}}>
        <Sidebar selectedCategory={selectedCategory}
        setSelectedCategory={setSelectedCategory}/>
        <Typography className='copyright' variant='body2' sx={{mt: 1.5, color:'black'}}>
          Copyright 2023 Watcher Media
        </Typography>
      </Box>
      <Box p={2} sx={{overflowY: 'auto', height:'90vh', flex: 2}}>
        <Typography variant='h4'fontWeight='bold' mb={2} sx={{color:'black'}}>
          {selectedCategory} <span style={{color: '#F31503'}} >videos</span>
        </Typography>
        <Videos videos={[]}/> 
      </Box>  
    </Stack>
  )
}

export default Feed

fetchFromAPI.js:

import axios from 'axios';

const BASE_URL = 'https://youtube-v31.p.rapidapi.com';

const options = {
  params: {
    maxResults: '50'
  },
  headers: {
    'X-RapidAPI-Key': process.env.REACT_APP_RAPID_API_KEY,
    'X-RapidAPI-Host': 'youtube-v31.p.rapidapi.com'
  }
};
 
export const fetchFromAPI = async (url) => {
  let data;
    const response = await axios.get(`${BASE_URL}/${url}`, options); 
    data = response.data;
    console.log(response);
    return data;
}

.env:

REACT_APP_RAPID_API_KEY = '-- myRapidAPI-Key--'; // I didn't want to show my actual key on here

the code snippet I got from rapidAPI:

const axios = require('axios');

const options = {
  method: 'GET',
  url: 'https://youtube-v31.p.rapidapi.com/captions',
  params: {
    part: 'snippet',
    videoId: 'M7FIvfx5J10'
  },
  headers: {
    'X-RapidAPI-Key': '-- myRapidAPI-Key--',
    'X-RapidAPI-Host': 'youtube-v31.p.rapidapi.com'
  }
};

try {
    const response = await axios.request(options);
    console.log(response.data);
} catch (error) {
    console.error(error);
}

videos.js:

import React from 'react'

const Videos = ({videos}) => {
  console.log(videos);
  return (
    <div>
    Videos
    </div>
  )
}

export default Videos