onBeforePageScroll work as two times

[Rikukuku]

onBeforePageScroll fires two times during the scrolling. if setShowPlayer function call at onBeforePageScroll, this problem happen. I want to hide a component when scrolling.

my code is here.

const Hotels = () => {
  const [currentPage, setCurrentPage] = useState(0)
  const [showPlayer, setShowPlayer] = useState(true)

  const handlePageChange = useCallback(
    (number) => {
      setCurrentPage(number);
      setPlayerState(true);
    },
    [setCurrentPage]
  );

  const handleBeforePageChange = (number) => {
    console.log("Before Change");
    setShowPlayer(false);
  };

  return (
    <>
      <div className="swipe-hotel-page">
        <ReactPageScroller
          pageOnChange={handlePageChange}
          onBeforePageScroll={handleBeforePageChange}
          customPageNumber={currentPage}
        >
          {hotelList.map((hotel, id) => {
            return (
              <HotelVideo
                key={id}
                id={id}
                name={hotel.name}
                station={hotel.near_station}
            );
          })}
        </ReactPageScroller>
        {showPlayer && (
          <VideoPlayer
            source={source}
            ref={videoRef}
            playerState={playerState}
          />
        )}
      </div>
      <style jsx>{`
        .swipe-hotel-page {
          max-width: 100vw;
          height: 100vh;
          margin: 0 auto;
          overflow: clip;
          position: relative;
          background-color: #1d1d1f;
          }
        `}
      </style>
    </>
  );
}

How do I deal with this?