“react-infinite-scroll-component” Stopped working after one call (loadMore only gets called once, next is fired once)

I’m using the react-infinite-scroll-component to implement the infinite scroll component. The configuration of the component is:

<div id="scrollableDiv" style={{ height: 300, overflow: "auto" }}>
         endMessage={<p style={{textAlign:'center'}}><b>Yay! You've seen it all!</b></p>}
         {<Texts texts = {texts}/>}

where texts is simply a state array of some text objects; const [texts, setTexts] = useState([])
This is the getText method to be called in next :

const getText = async ()=>{

        const res = await axios.get("http://localhost:3001/api/sth",{
            params: {
                ids: followings.map(i => i.id),
                str_ids: followings.map(i => i.str_id)
              paramsSerializer: params => {
                return qs.stringify(params)

        let str_ids_res = res.data.map(i => i.string_id)
        let texts_res = res.data.map(i => i.texts)

        const filtered_res = //some processing here on texts_res
        /* eslint eqeqeq: 0 */
            console.log("Not equal")
            // append arrays to a array state
            setTexts((prevtexts) => prevtexts.concat([...filtered_res]))


await axios.get("http://localhost:3001/api/sth")

always return two different texts from DB so setTexts should always get called.

<Texts/> component is a card component from semantic UI tho.

const Texts = ({texts}) =>{
return (
{texts.map(text =>(



```InfiniteScroll``` component only fires ```Next``` once even though my ```datalength``` variable is setting correctly.