getting callstack with react hooks and infinite scroll? - reactjs

Question

i have already tried useMemo and useEffect, but i can't seem to figure out why my code don't work:
const App: React.FC = () => {
const dispatch = useDispatch();
const [page, setPage] = useState(1);
const { userIds, users, totalUsers } = useSelector(
({ users }: RootState) => users
);
const renderUsers = useMemo(() => {
return userIds.map(userId => (
<div key={users[userId].first_name}>{users[userId].first_name}</div>
));
}, [userIds, users]);
const hasMore = useMemo(() => {
return userIds.map(userId => userId).length < totalUsers;
}, [userIds, totalUsers]);
const fetchUsers = useCallback(
async (page: number) => {
dispatch({
type: FETCH_USERS_REQUEST,
payload: { page }
});
try {
const { data, ...result } = await api.fetchUsers(page);
const user = new schema.Entity('users');
const {
entities,
result: { users: userIds }
} = normalize({ users: data }, { users: [user] });
dispatch({
type: FETCH_USERS_SUCCESS,
payload: {
...result,
users: entities.users,
userIds
}
});
} catch (error) {
dispatch({ type: FETCH_USERS_FAILURE, payload: { error } });
}
},
[dispatch]
);
useEffect(() => {
fetchUsers(1);
}, [fetchUsers]);
let scrollParentRef: HTMLDivElement | null = null;
return (
<div className="vh-100 vw-100">
<Header />
<div
className="container overflow-auto"
ref={div => {
scrollParentRef = div;
}}
>
<InfiniteScroll
pageStart={0}
loadMore={async page => await fetchUsers(page)}
hasMore={hasMore}
loader={
<div className="loader" key={0}>
Loading ...
</div>
}
useWindow={false}
getScrollParent={() => scrollParentRef}
>
{renderUsers}
</InfiniteScroll>
</div>
</div>
);
};
I am using infinite scroll and the error i got is call stack, please help me fix this?