react-infinite-scroll-component re-render next page

Question

Whenever I scroll down of the page infinite scroll re-render components inside it and it works just one time. What I mean about re-render components it didn't work as should be I changes from first to last but don't add more videothumnail component. here is the code of my main part:

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";

import moment from "moment";
import InfiniteScroll from "react-infinite-scroll-component";

import VideoThumbnail from "../../components/video-thumbnail/video-thumbnail.component";
import { getPopularVideos } from "../../redux/actions/videos.actions";

import "./trendingpage.styles.css";

const TrendingPage = () => {
  const dispatch = useDispatch();

  const { videos } = useSelector((state) => state.homeVideos);

  const fetchData = () => {
    dispatch(getPopularVideos());
  };

  useEffect(() => {
    dispatch(getPopularVideos());
  }, [dispatch]);

  return (
    <div className="page-container wrap-content">
      <InfiniteScroll
        dataLength={videos.length}
        next={fetchData}
        hasMore={true}
      >
        {videos.map((item) => (
          <VideoThumbnail
            key={item.id}
            image={item.snippet.thumbnails.medium.url}
            time={moment
              .utc(
                moment.duration(item.contentDetails.duration).asSeconds() * 1000
              )
              .format("mm:ss")}
            owner={item.snippet.channelTitle}
            name={item.snippet.title}
            minWidth="230px"
          />
        ))}
      </InfiniteScroll>
    </div>
  );
};

export default TrendingPage;

I thought maybe it is because of redux actions so I will paste it here also:

export const getPopularVideos = () => async (dispatch, getState) => {
  try {
    dispatch({
      type: HOME_VIDEOS_REQUEST,
    });

    const { data } = await request.get("/videos", {
      params: {
        part: "snippet, contentDetails, statistics",
        chart: "mostPopular",
        regionCode: "TR",
        maxResults: 20,
        pageToken: getState().homeVideos.nextPageToken,
      },
    });

    dispatch({
      type: HOME_VIDEOS_SUCCESS,
      payload: {
        videos: data.items,
        nextPageToken: data.nextPageToken,
      },
    });
  } catch (error) {
    console.log(error);
    dispatch({
      type: HOME_VIDEOS_FAIL,
      payload: error.message,
    });
  }
};

Thanks:)