How to identify the bottom when scroller reaches to end of div in Reactjs

Below Is the div in its has a scroller with overflow. But what I want when I reach to the bottom of that div using a scroller. I want to load more items. I will append in resultList but don't know how to identify the bottom of div.

const ListItemScroll = (props) => {
        let { resultList, indexChange, radioValue, radioHandleChange } = props

        return (
            <div style={{ overflow: "auto", overflowX: "hidden", height: "90%" }}>

                <FormControl component="fieldset" variant="standard">
                    {

                        resultList[indexChange].dataList.map((list) => {
                            return (
                                <RadioGroup aria-label="gender"
                                    name="controlled-radio-buttons-group"
                                    value={radioValue[indexChange].value}
                                    onChange={(e) => radioHandleChange(e, list)}>
                                    <FormControlLabel size="small" value={list.name} control={<Radio size='small' />} label={list.name} />
                                </RadioGroup>

                            )
                        })
                    }
                </FormControl>

            </div>
        )
    }

Solution 1:

You need to implement Intersection Observer to identify if the div is in viewport or not. Insert an empty div before </FormControl> and use Intersection Observer on that div.

See here: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API