リストの一番下までスクロールした時を判別したい

前提・実現したいこと

Userのリストは１０件ずつ表示されます。
リストの一番したまでスクロールしたら次の１０件をUserのリストに追加したいです
一番したまでスクロールされたことを判別したいのですがどうやったらできるのでしょうか？

該当のソースコード

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>
  );
};