Intersection Observer API implementation issue in react using React-redux

Question

component.jsx

    const [hasMore, setHasMore] = useState(true)
    const [page, setPage] = useState(0);
    const elementRef = useRef(null);
    const [selected, setSelected] = useState([]);
    const dispatch = useDispatch();
    const [data, setData ] = useState([]);
    const { sampleData, pageNo, pageSize, error } = useSelector((state) => state.dashboard)

    function onIntersection(entries) {
        const firstEntry = entries[0]
        if (firstEntry.isIntersecting && hasMore) {
            fetchMoreItems()
        }
    }

    useEffect(() => {
        const observer = new IntersectionObserver(onIntersection)
        if (observer && elementRef.current) {
            observer.observe(elementRef.current)
        }

        return () => {
            if (observer) {
                observer.disconnect()
            }
        }
    }, [flights])

    async function fetchMoreItems() {
        const response = await fetch(``)  // API which has 2 parameters, PageSize and pageNo(you can use dummyData.io for sample)
        if (response.ok) {
            const data = await response.json()
            console.log(data.length)
            if (data.length === 0) {
                setHasMore(false)
            } else {
                setFlights(prevFlights => [...prevFlights, ...data])
                setPage(prevPage => prevPage + 1)
            }
        } else {
            setHasMore(false);
        }
    }
 return (
        <div className={classes.root}>
            <GridContainer container spacing={3}>
                <Grid item xs={12} sm={12} md={8} lg={8}>
                    <Box className={classes.boxContainer}>
                        <Typography className={classes.MenuTitle}>
                            <MenuIcon sx={{ marginRight: 1 }} />TODAY'S FLIGHTS
                        </Typography>
                        <Divider />
                        <List sx={{ height: '85vh', overflow: 'auto', padding: '0' }}>
                            {data?.map((index) => (
                                <React.Fragment key={index.ID}>
                                    .........// Its has ListItem
                                </React.Fragment>
                            ))}
                            {hasMore &&
                                <ListItem ref={elementRef} style={{ textAlign: 'center' }}>
                                    <ListItemText
                                        primary={
                                            <React.Fragment>
                                                <Typography>
                                                    Loading...
                                                </Typography>
                                            </React.Fragment>
                                        }
                                    />
                                </ListItem>
                            }
                        </List>
                    </Box>
                </Grid>
            </GridContainer>
        </div>
    );

dataSlice.jsx

import { createSlice } from '@reduxjs/toolkit';
import { createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';

const URL = ''; // Your API URL

const initialState = {
    isLoading: false,
    sampleData: [],
    lastUpdated: '',
    pageSize: 5,
    pageNo: 0,
    error: '',
};

export const fetchSampleData = createAsyncThunk(
    'dashboard/fetchSampleData',
    async ({ pageSize, pageNo }) => {
        const response = await axios.get(`${URL}&pageIndex=${pageNo}&pageSize=${pageSize}`);
        return response.data;
    }
);

const dataSlice = createSlice({
    name: 'AllData',
    initialState: initialState,
    reducers: {
        setPageNo: (state, action) => {
            state.pageNo = action.payload;
        },
    },
    extraReducers: (builder) => {
        builder.addCase(fetchSampleData.pending, (state) => {
            state.isLoading = true;
            state.sampleData = [];
        });
        builder.addCase(fetchSampleData.fulfilled, (state, action) => {
            state.isLoading = false;
            state.lastUpdated = action.payload.lastUpdatedOn;
            state.sampleData = action.payload.sampleData;
        });
        builder.addCase(fetchSampleData.rejected, (state, action) => {
            state.isLoading = false;
            state.error = action.error.message;
        });
    },
});

export const { setPageNo } = dataSlice.actions;

export default dataSlice.reducer;

my implementation of Intersection Observer using dataSlice.jsx

useEffect(() => {
    dispatch(fetchSampleData({ pageNo, pageSize }));
})

function onIntersection(entries) {
    const firstEntry = entries[0]
    if (firstEntry.isIntersecting && hasMore) {
        fetchMoreItems()
    }
}

useEffect(() => {
    const observer = new IntersectionObserver(onIntersection)
    if (observer && elementRef.current) {
        observer.observe(elementRef.current)
    }

    return () => {
        if (observer) {
            observer.disconnect()
        }
    }
}, [sampleData,pageNo])

async function fetchMoreItems() {
    console.log(pageNo)
    const response = dispatch(fetchSampleData({ pageNo, pageSize }))
    if (response.ok) {
            const data = await response.json()
            console.log(data.length)
            if (data.length === 0) {
                setHasMore(false)
            } else {
                setFlights(prevFlights => [...prevFlights, ...data])
                dispatch(setPage(pageNo => pageNo + 1))
            }
        } else {
            setHasMore(false);
        }
}

The first file component.jsx has the working implementation for Intersection Observation API. I am using react-redux store and now i want the api call to be in the slice as above i.e dataSlice

I tried making changes to my implementation of Intersection Observer API in component but its all leading to undefined error or loop . Please help me with this, Any required information you need ask me.

I was expecting a infinite scroll list which fetched 5 records at a time but i was not receiving any data on screen and their were errors and infinite loops in console.