{ status_code: 7, status_message: "Invalid API key: You must be granted a valid key.", success: false }

Getting this but I have doubled checked my api key and copied it and pasted but although getting the same message..

URL using for my fetch() functions

const API_BASE_URL = "https://api.themoviedb.org/3";

const API_KEY = import.meta.VITE_TMDB_API_KEY;

const API_OPTIONS = {
  method: 'GET',
  headers: {
    Accept: "application/json",
    Authorization: `Bearer ${API_KEY}`
  }
}

function App() {
  const [searchTerm, setSearchTerm] = useState('');
  const [errorMessage, setErrorMessage] = useState(null);

  const fetchMovies = async () => {
    try {
      const endpoint = `${API_BASE_URL}/discover/movie?sort_by=popularity.desc`;
      const response = await fetch(endpoint, API_OPTIONS);

      if (!response.ok) {
        throw new Error("Sorry");
      } else {
        const data = await response.json();
        if (data.response == 'false') {
          setErrorMessage(data.error || 'failed to fetch movies.');
        }
        console.log(data);
      }
    } catch (error) {
      console.error(`Error fetching movies : ${error}`);
      setErrorMessage(`Error fetching movies, please try again later.`);
    }
  }

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