swiper: Swiper React: Mapping Swiper Slide Not Working When Reload

This is a (multiple allowed):

• bug

• enhancement

• feature-discussion (RFC)

• Swiper Version: 6.3.5.

• Platform/Target and Browser Versions: MacOS, Chrome 86.0.4240.111.

What you did

Hello, when this code load for the first time, Swiper seems doesn’t init, must be changed to the other view on developer tools in order to works.

import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Navigation, Pagination, EffectCoverflow } from 'swiper';

import 'swiper/swiper-bundle.css';

function HomeSlider(){
  SwiperCore.use([Navigation, Pagination, EffectCoverflow]);

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

  const [movies, setMovies] = useState([]);
  
  const HomeHeadlineImages = async () => {
    const weeklyMovies = await `fetch('https://api.themoviedb.org/3/trending/movie/week?api_key=xxxxxxx');`
    const weeklyRecommendation = await weeklyMovies.json();
    // console.log(weeklyRecommendation.results);
    setMovies(weeklyRecommendation.results);
  }

  const slides = [];
  movies.slice(0,5).map(movie => (
    slides.push(
      <SwiperSlide key={movie.id}>
        <img src={`https://image.tmdb.org/t/p/w500/${movie.backdrop_path}`} alt=""/>
      </SwiperSlide>
    )
  ));

  return (
    <div>
      <div className="headline-home">
        <Swiper id="headline" navigation pagination effect="coverflow">
          {slides}
        </Swiper>
      </div>
    </div>
  )
}

export default HomeSlider;

There's no extra properties like when Swiper worked (prev, active, next, etc).

Expected Behavior

Worked only when we change window, not first load.

Did I missing something? Thanks.