Getting 401 unauthorized error rapidapi How do i fix this?

Question

I am currently using RapidAPI and encountering a 401 error. I have double-checked my API key and it seems to be correct, so I'm not sure what the issue might be. Can you please provide some guidance on how to resolve this issue?

api.js

import axios from 'axios'
        
        
const BASE_URL = 'https://youtube138.p.rapidapi.com';

const options = {
    params: { hl: 'en', gl: 'US' },
    headers: {
        'X-RapidAPI-Key': process.env.REACT_APP_YOUTUBE_API_KEY,
        'X-RapidAPI-Host': 'youtube138.p.rapidapi.com'
    }
};

export const fetchDataFromApi = async (url) => {
    const { data } = await axios.get(`${BASE_URL}/${url}`, options);
    return data;
}

//contextAPI.js

    import React, { useEffect, useState, createContext } from 'react';
import { fetchDataFromApi } from '../utils/api';

export const Context = createContext();

export const AppContext = (props) => {
    const [loading, setLoading] = useState(false);
    const [searchResults, setSearchResults] = useState(false);
    const [selectCategories, setSelectCategories] = useState("New");
    const [mobileMenu, setMobileMenu] = useState(false);

    useEffect(() => {
        fetchSelectCategoryData(selectCategories)
    }, [selectCategories]);

    const fetchSelectCategoryData = (query) => {
        setLoading(true);
        fetchDataFromApi(`search/?q=${query}`).then((res) => {
            console.log(res);
            //setSearchResults(res)
            setLoading(false);
        })
    }

    return (
        <Context.Provider value={{
            loading,
            setLoading,
            searchResults,
            selectCategories,
            setSelectCategories,
            mobileMenu,
            setMobileMenu,
        }}>
            {props.children}
        </Context.Provider>
    )
}