Сопоставление проблем с массивом с помощью .map ()

У меня есть компонент реакции, который отображает массив фильмов в функции рендеринга и выводит изображение каждого из них. У меня возникли проблемы с отображением каждого изображения в теге <img />. В настоящее время кажется, что все изображения помещаются в один тег <img />, так как я могу просмотреть изображения и вставить каждое в свой собственный тег изображения?

render () {
const movies = this.state.movies.map((movie, i) => {
  console.info("Image url: ", movie.images.boxArt)
})


return (
  <div className='welcome'>
    <div className='container'>
      <div className='movies'>
        { this.state.loading &&
          <Loader size='10' />
        }

        { !this.state.loading &&
          <div className='movie'>
            <img src = { movies } /> <===SHOULD END UP BEING A ROW OF MOVIE POSTERS
          </div>
        }
      </div>
    </div>
  </div>
 )
 }
}