Infinite Scrolling not working with Material UI Grid component

I am currently trying to display user posts on the Home Page of my app, there are about 45 dummy posts and I am using react-infinite-scroll-component to display 5 at a time. However, for some reason, only about 10-15 in total will get displayed, once I hit about 15 posts, the scroller just sits there saying "Loading..." and does not load the next 5 posts. I have Grid from Material UI as a child of InfiniteScroll and I am wondering if they work together well or not?

Here is my code in question:

The function that checks if there is more data:

const fetchMoreData = (e) => {
  e.preventDefault()
  if (numberOfPosts.length >= 45) {
    setHasMore(false)
    return;
  }

  setTimeout(() => {
    setNumberOfPosts(numberOfPosts.concat(Array.from({length: 5})))
  }, 500)
}

The Infinite Scroll itself:

<InfiniteScroll dataLength={numberOfPosts.length} next={fetchMoreData} hasMore={hasMore} loader={<h4>Loading...</h4>}
       id='all-post-container' scrollThreshold={1} endMessage={<p style={{ textAlign: "center" }}>
       <b>Yay! You have seen it all</b>
     </p>}
       style={{position: 'absolute', top: '25%', left: '20%', backgroundColor: 'red', height: '72%', width: "54%", borderRadius: '30px'}}>
      <Grid
        container
        direction="column"
        justifyContent="center"
        alignItems="center"
        spacing={45}
      >
      {numberOfPosts.map(key => {
      return (
        <Grid container item>
        <div id="post-container" style={{margin: '5%', position: 'absolute', width: '90%', height: '40%', backgroundColor: 'white', borderRadius: '30px', overflow: 'auto'}}>
          <Avatar src={<AvatarPicture/>} style={{position: 'absolute', left: '1%', top: '3%', height: '60px', width: '60px'}} size='lg'></Avatar>
          <p style={{position: 'absolute', left: '9%', top: '-5%', fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '500', fontSize: '20px', lineHeight: '25px', overflow: 'auto'}}>@{state.storage.username}</p>
          <p style={{position: 'absolute', left: '9%', top: '10%', fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '400', fontSize: '16px', lineHeight: '20px', color: '#6D7683'}}>{state.storage.location}</p>
          <p style={{position: 'absolute', left: '20%', top: '10%', fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '400', fontSize: '16px', lineHeight: '20px', color: '#2D87FF'}}>time</p>
          <div id="text-container" style={{position: 'absolute', top: '30%', left: '5%', backgroundColor: '#FFFBEE', height: '30%', width: '90%', borderRadius: '16px'}}></div>
          <TextField InputProps={{
            startAdornment: (
              <InputAdornment>
                <Avatar src={state.storage.profileImageURL} />
              </InputAdornment>
            ),
            classes: {
              notchedOutline: 'notched-outline-border-radius'
          }
          }} maxRows={10} inputProps={{maxLength: 500}} multiline style={{position: 'absolute', left: '5%', top: '78%', width: '90%', background: '#F8FAFF', border: '1px solid #D9E1F9', borderRadius: '16px'}} placeholder='Write your comment'></TextField>
          <IconButton onClick={() => setLike(!like)} style={{ position: 'absolute', top: '60%', left: '5%'}} onMouseLeave={() => setMouseOver(false)} onMouseOver={() => setMouseOver(true)}>{like && mouseOver ? <HeartBrokenIcon style={{color: 'red'}}/> : like ? <FavoriteIcon style={{color: 'red'}} /> : <FavoriteBorderTwoToneIcon /> }</IconButton>
          <p style={{position: 'absolute', top: '59%', left: '9%'}}>likes</p>
          <IconButton onClick={() => setReply(!reply)} style={{ position: 'absolute', top: '60%', left: '13%'}}>{reply ? <MessageIcon color="primary"/> : <MessageOutlinedIcon/>}</IconButton>
          <p style={{position: 'absolute', top: '59%', left: '17%'}}>replies</p>
          <IconButton style={{ position: 'absolute', top: '60%', left: '23%'}}><IosShareOutlinedIcon /></IconButton>
          <p style={{position: 'absolute', top: '59%', left: '27%'}}>shares</p>
        </div>
        </Grid>
      )})}
      </Grid>
      </InfiniteScroll>

Could the way state works be affecting this as well?