Threshold not working in Waypoint

[dhairya-bhatia]

I am using Waypoint with Material UI Table . I want to call my API when 4-5 items/rows are pending for the user to see inside the table so that there is enough data always and user has never has to see the loader on the screen.
I have tried using threshold but it doesen't seem to work . I am attaching my Code for your reference.

`import React, { useState, useEffect } from "react";
// @material-core
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
//react-waypoint
import { Waypoint } from "react-waypoint";

//molecules
import CircularLoader from "components/molecules/CircularLoader";

//dummy data
import { rows } from "./dummyData";

const useStyles = makeStyles({
table: {
minWidth: 650,
},
hideLastBorder: {
"&:last-child td, &:last-child th": {
border: 0,
},
},
});

export default function TableInfiniteScrolling({
initialOffSet = 10,
generalOffSet = 10,
}) {
const classes = useStyles();
const [data, setData] = useState([]);
const [hasMoreItems, setHasMoreItems] = useState(true);
const [isLoading, setIsLoading] = useState(false);

const fetchData = (offset) => {

setIsLoading(true);
let newtableData = [];
for (
  let i = data.length;
  i < data.length + offset && i < rows.length;
  i++
) {
  newtableData.push(rows[i]);
}
if (newtableData.length === 0) {
  setHasMoreItems(false);
}
setData((prevData) => {
  return [...prevData, ...newtableData];
});
setIsLoading(false);

};

useEffect(() => {
fetchData(initialOffSet);
}, []);

return (
<>

ID
Name
Email
Gender



{data.map((row, index) => (
<React.Fragment key={index}>


{row.id}

{row.name}
{row.email}
{row.gender}

</React.Fragment>
))}

  {isLoading && <CircularLoader />}

  {hasMoreItems && (
    <Waypoint
      onEnter={() => fetchData(generalOffSet)}
      threshold={0.5}
    />
  )}
</>

);
}`

[Beardificent]

Threshold has been replaced by bottomOffset and topOffset, if I'm not mistaken.