I want to run the API communication when the list is at the bottom

Question

There is component that displays a list of users.
It displays 10 users each.
Once I get to the bottom of the list, i want to add the next 10 items to the list.
I want it to feel like a messenger.
How can I determine the bottom of the list?

import React, { FunctionComponent } from 'react';
import { User } from 'components/molecules/User';
import { IUsers } from 'domain/room';

type Props = {
  users: IUser;
  onClickUser: (id: number) => void;
};
export const UserList: FunctionComponent<Props> = ({
  users,
  onClickUser,
}) => {
return (
       <div style={{ overflow: 'auto' }}>
            {users.map((user) => (
              <div key={user.id} onClick={() => onClickUser(user.id)}>
                <User
                  name={user.name}
                  img={user.pictureUrl}
                  status={user.status}
                />
              </div> 
        ))}
 );
}

import { Label } from 'components/atoms/Label';
import { RoundedIcon } from 'components/atoms/RoundedIcon';
import React, { FunctionComponent } from 'react';

type Props = {
  name: string;
  img: string;
  status: string;
};

export const User: FunctionComponent<Props> = ({
  name,
  img,
  status,
}) => {
  return (
    <div>
        <RoundedIcon size={65} url={img} />
        <Label weight={700} size={14}>
          {name}
        </Label>
        <Label size={12} height={18}>
          {status}
        </Label>
    </div>
  );
};