.Map on React does not work for me

I'm doing an exercise and React is telling me that I have the error in the .map. This is the area where the error occurs, specifically in FourColGrid. Thanks in advance.

class Home extends Component{
    state ={
        movie:[],
        HeroImage:null,
        loading:false,
        currentPage: 0,
        totalPages:0,
        searchTerm: ''
    }

    componentDidMount(){
        this.setState({loading:true});
        const endpoint ='${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=1';
        this.fetchItems(endpoint);
    }

    searchItems =(searchTerm)=>{
        console.log(searchTerm);
        let endpoint = '';
        this.setState({
            movie:[],
            loading:true,
            searchTerm
        })

        if (searchTerm === ''){
            endpoint = '${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=1';
        }else{
            endpoint ='${API_URL}search/movies?api_key=${API_KEY}&language=en-US&query=${searchTerm}';
        }
        this.fetchItems(endpoint);
    }

    loadMoreItems =() =>{
        let endpoint='';
        this.setState({loading:true});

        if(this.state.searchTerm === ''){
            endpoint ='${API_URL}/movie/popular?api_key=${API_KEY}&language=en-US&page=${this.state.currentPage + 1}';
        } else{
            endpoint='${API_URL}search/movie?api_key=${API_KEY}&language=en-US&query=${this.state.searchTerm}&page=${this.state.currentPage + 1}';
        }
        this.fetchItems(endpoint);
    }

    fetchItems=(endpoint)=>{
        fetch(endpoint)
        .then(result => result.json())
        .then(result => {
            this.setState({
                movies: [...this.state.movies, ...result.results],
                heroImage: this.state.HeroImage || result.results[0],
                loading: false,
                currentPage:result.page,
                totalPages:result.total_pages,
            })
        })
        .catch(error =>console.error('Error:',error))
    }

    render() {
        return (
          <div className="rmdb-home">
          {this.state.heroImage ?
            <div>
              <HeroImage
                image={'${IMAGE_BASE_URL}${BACKDROP_SIZE}${this.state.heroImage.backdrop_path}'}
                title={this.state.heroImage.original_title}
                text={this.state.heroImage.overview}
              />
              <SearchBar callback={this.searchItems} />
            </div> : null }
            <div className="rmdb-home-grid">
              <FourColGrid
              header={this.state.searchTerm ? 'Search Result': 'Popular Movies'}
              loading={this.state.loading}
              >
              {this.state.movies.map((element,i)=>{
                  return<MovieThumb
                        key={i}
                        clickable={true}
                        image={element.poster_path ? '${IMAGE_BASE_URL}${POSTER_SIZE}${element.poster_path}':'.img/no_image.jpg'}
                        movieId={element.id}
                        movieName={element.original_title}
                        />
              })}
              </FourColGrid>
              {this.state.loading ? <Spinner /> : null}
              {(this.state.currentPage <= this.state.totalPages && !this.state.loading) ?
                <LoadMoreBtn text="Load More" onClick={this.loadMoreItems} />
                : null }
            </div>
          </div>
        )
      }
    }