React infinite scroll component auto call data without scrolling

Question

Hi I had been try to perform infinite scrolling in React JS but i got problem when try to scroll to next page. The next keyword in infinitescroll will direct call the API multiple times. Below show as my current code.

// States and call API
const [ responseData, setresponseData ] = useState([]);
const [ page, setPage ] = useState(1);
const [ totalPage, setTotalPage ] = useState(1);
const [ totalLength, setTotalLength ] = useState(0);

const fetchData = useCallback(async () => {
    
    await axios.get(`http://sampleURL/api/?page=${ page }`)
    .then((response)=>{
        console.log(response.data.users)
        // setresponseData(prev => [...prev, ...response.data.users.data]);
        setresponseData(responseData.concat(response.data.users.data));
        setTotalLength(response.data.users.total)
        setTotalPage(response.data.users.last_page)
        setPage( page + 1 )
    })

}, [ page, responseData ]);

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


// Return data
return (
    <div className=' w-5/6 mx-auto mt-10 h-full overflow-auto' id="scrollableDiv">
        
        <InfiniteScroll 
            dataLength={ totalLength } 
            next={ fetchData } 
            hasMore={ true }
            scrollableTarget="scrollableDiv"
        >
            <ResponseList responseData={responseData}/>
        </InfiniteScroll>

        <div className=' fixed w-12 h-12 bg-black bottom-44 right-0 rounded-tl-lg rounded-bl-lg text-white flex items-center justify-center'>
            <FaSearch className='text-2xl' />
        </div>

        <div className=' fixed w-12 h-12 bg-black bottom-28 right-0 rounded-tl-lg rounded-bl-lg text-white flex items-center justify-center'>
            <FaFilter className='text-2xl' />
        </div>

        <div className=' fixed w-12 h-24 bg-black bottom-0 right-0 rounded-tl-lg text-white flex flex-col text-center text-md items-center justify-center'>
            <span>{ page }</span>
            <span>----</span>
            <span>{ totalPage }</span>
        </div>
    </div>
)

Hope you guys can help with this and I'm not sure where did I done wrong.