I have a problem when i try to fetch data through my env file i get an error "Failed to load resource: the server responded with a status of 401 ()" error msg

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

but when i fetch data without using env.local file and use my api key directly in const variable everything works fine. But i want to make the env local file call to work.

My env.local file

API_KEY=3retkjdkfgjfd95659 (MADE IT UP FOR THE POST)

My utils folder /requests.js

const API_KEY = process.env.API_KEY;
//const API_KEY = "3retkjdkfgjfd95659" the code works only when i use this variable
const requests = {
  fetchTopRated: {
    title: "Top Rated",
    url: `/movie/top_rated?api_key=${API_KEY}&language=en-US`,
  },}

My axios file

const instance = axios.create({
  baseURL: "https://api.themoviedb.org/3/",
});

export default instance;

Banner file

function Banner() {
  const [movie, setMovie] = useState([]);
  useEffect(() => {
    async function fetchData() {
      const request = await axios.get(requests.fetchTopRated.url);
      setMovie(
        request.data.results[
          Math.floor(Math.random() * request.data.results.length - 1)
        ]
      );
      return request;
    }
    fetchData();
  }, []);