Here is the code, type of observer is boolean, it returns true if visible otherwise false. The customer data contains more than 37 thousand customer's name. To minimize the resource usage, I want to load more options once the last option is visible while scrolling and make an API request if the last element is observed. Link for intersection observer API https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver
<select
id="customer_id"
name="customer_id"
placeholder={strings.select_customer}
options={customerOptions}
value={formValue.customer_id ? formValue.customer_id : null}
onChange={handleCustomerChange}
isLoading={customerListLoading}>
{customerOptions?.map((customer: Customer) => {
return (
<option key={customer?.id} value={customer?.id}>
{customer?.name}
</option>
);
})}
<option ref={observer}>last visible option</option>
</select>