PrimeReact datatable lazy load not stop after fetch data from server

Question

I try implement lazy load for PrimeReact DataTable. My problem is: after loading data to table the data is invisible, even though I set lazyLoading to false.

    const [lazyLoading, setLazyLoading] = useState(false);

    const fetchRange = (first: number, last: number) => {
        fetch(`/api/questionanswer/slice?first=${first}&last=${last}`).then((response) => response.json()).then(data => {
            console.log(data);
            data = [...questionAnswerValues, data];
            //some data procession
            setLazyLoading(false); //Do nothing...
        });
    }

Data Table looks like this:

                <DataTable value={questionAnswerValues} responsiveLayout="scroll" selectionMode="single" selection={selectedRow}
                    onSelectionChange={(e) => setSelectedRow(e.value)} scrollable scrollHeight="400px"
                    virtualScrollerOptions={{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading }}
                    tableStyle={{ minWidth: '50rem' }}>
                    <Column selectionMode="single" header="Select one"></Column>
                    <Column field="_id" header="ID"></Column>
                    <Column field="question_id.question" header="Question"></Column>
                    <Column field="answer" header="Answer"></Column>
                    <Column field="isCorrect" header="IsCorrect"></Column>
                </DataTable>

How can I stop lazy loading in DataTable?

Answer 1

Set lazyLoading to true first! DataTable doesn't set it to true when page required.

const fetchRange = (first: number, last: number) => {
        setLazyLoading(true)
        fetch(`/api/questionanswer/slice?first=${first}&last=${last}`).then((response) => response.json()).then(data => {
            console.log(data);