'Why does it make a mistake?

The code below is not working. It doesn't see the apikey in parentheses.I couldn't understand what I had to do here. Is it a problem with the hooks structure?

 import React, { useEffect } from 'react';
    import MovieListing from "../MovieListing/MovieListing";
    import movieApi from "../../common/apis/movieApi";
    import { APIKey } from "../../common/apis/MovieApiKey"; //the program does not see this
    import "./Home.scss";
    import { useDispatch } from 'react-redux';
    import { addMovies } from '../../features/movies/movieSlice';
    
    const Home = () => {
        const dispatch = useDispatch();
        useEffect(() => {
            const movieText = "Harry";
            const fetchMovies = async () => {
                const response = await movieApi.get('?apiKey=${APIKey}&s=${movieText}&type=movie')
                    .catch((err) => { console.log("Err :", err) });
                dispatch(addMovies)(response.data); //api key does not see this
            };
            fetchMovies();
        }, []);
        return (
            <div>
                <div className='banner-img'></div>
                <MovieListing />
            </div>
        );
    };
    
    export default Home;


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source