Почему не работает lazy load?

import React, { useState, useEffect } from 'react';
import { users, generateUsers } from '../../users/generateUsers.tsx';
import UserItem from '../userItem/UserItem.tsx';
import { nanoid } from 'nanoid';

export default function UserList() {
  const [loadedUsers, setLoadedUsers] = useState(users.slice(0, 40)); // Первоначально загружаем 40 пользователей
  const [allUsers, setAllUsers] = useState(users); //В users находится 1000 юзеров

  useEffect(() => {
    // Обработчик скролла страницы
    const handleScroll = () => {
      // Получаем высоту окна браузера
      const windowHeight = window.innerHeight;
      // Получаем текущую прокрутку страницы
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      // Получаем высоту всего контента страницы
      const documentHeight = document.documentElement.offsetHeight;

      // Проверяем, достигли ли мы нижней части страницы
      if (windowHeight + scrollTop >= documentHeight) {
        // Вычисляем индексы для следующей порции загружаемых пользователей
        const nextBatchStartIndex = loadedUsers.length;
        const nextBatchEndIndex = nextBatchStartIndex + 40;

        // Проверяем, остались ли еще пользователи для загрузки
        if (nextBatchStartIndex < allUsers.length) {
          // Загружаем следующую порцию пользователей
          const nextBatch = allUsers.slice(nextBatchStartIndex, nextBatchEndIndex);
          setLoadedUsers(prevLoadedUsers => [...prevLoadedUsers, ...nextBatch]);
        }
      }
    };

    // Добавляем обработчик события скролла
    window.addEventListener('scroll', handleScroll);

    // Очищаем обработчик при размонтировании компонента
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, [loadedUsers, allUsers]);

  return (
    <div>
      {loadedUsers.map((user) => (
        <UserItem
          key={nanoid()}
          color={user.color}
          speed={user.speed}
          name={user.name}
          time={user.time}
        />
      ))}
    </div>
  );
}