Hey, I was granted an API key, but when I implemented it into my code, I keep getting {"status_code":7,"status_message":"Invalid API key: You must be granted a valid key.","success":false}. here is my code: import React, { useState, useEffect } from "react"; import "./OptionsTabs.css"; import Nav from 'react-bootstrap/Nav'; import NavDropdown from 'react-bootstrap/NavDropdown'; import GenreList from "./GenreList";

function OptionsTab () { const { VITE_MOVIE_API_KEY } = import.meta.env

const [genres, setGenres] = useState([]);


const fetchGenresData = async () => {
    try {
        const response = await fetch(
          `https://api.themoviedb.org/3/genre/movie/list?language=en&${VITE_MOVIE_API_KEY}`,
          {
            headers: {
                accept: 'application/json',
                Authorization: `Bearer ${VITE_MOVIE_API_KEY}`,
            },

          }  
        );

        if (!response.ok) {
            throw new Error(`Error fetching genres: ${response.statusText}`);
        }
        const data = await response.json();
        setGenres(data.results);
    }   catch (error) {
        console.error('Error fetching genres:', error);
    }
};

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

Can anyone help me out? Although I'm pretty sure its not my code and its the API key itself