i used some of method’s and also ask chatgpt still not work, the scroll down still not logging back in console how to fix that, im using reactTSX in next

"use client";
import { useRef, useState, useEffect } from "react";
import Short from "./Short";
import data from "./reels.json";

// Function to shuffle the array randomly
function shuffleArray(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

const ShortContainer: React.FC = () => {
  const shortContainerRef = useRef<HTMLDivElement>(null);
  const [visibleVideos, setVisibleVideos] = useState<Array<any>>([]);
  const [totalVideos, setTotalVideos] = useState<number>(0);

  // Randomize the data array
  const randomizedData = shuffleArray(data);

  // Convert the randomized data to an array of objects
  const randomizedObjects = randomizedData.map((item, index) => ({
    id: `${index + 1}`,
    username: item.username,
    videoUrl: item.videoUrl,
    title: item.title,
    profileUrl: item.profileUrl,
  }));

  useEffect(() => {
    // Set initial visible videos
    const initialVideos = randomizedObjects.slice(0, 3);
    setVisibleVideos(initialVideos);
    setTotalVideos(randomizedObjects.length);

    // Add scroll event listener
    const handleScroll = () => {
      if (
        window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight
      ) {
        console.log("User scrolled down");
        loadMoreVideos();
      }
    };

    window.addEventListener("scroll", handleScroll);
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  const isBottom = (element: HTMLElement | null) => {
    if (!element) return false;
    return (
      element.scrollHeight - element.scrollTop === element.clientHeight
    );
  };

  const loadMoreVideos = () => {
    const currentLength = visibleVideos.length;
    if (currentLength < totalVideos) {
      const newVideos = randomizedObjects.slice(
        currentLength,
        currentLength + 1
      );
      setVisibleVideos((prevVideos) => [...prevVideos, ...newVideos]);
    }
  };

  return (
    <section ref={shortContainerRef} className="short-container">
      {visibleVideos.map((short) => (
        <Short
          key={short.id}
          shortContainerRef={shortContainerRef}
          short={short}
        />
      ))}
    </section>
  );
};

export default ShortContainer;

i successfully scrolled down my page but it’s not logging in console also the loadMoreVideos not working, scroll down is undetectable

scrolling down logic in react how?