Struggling to Get Infinite Scrolling To Work

[mild nova]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[ancient canopy]

Inside of my index file I have this snippet of code:

//This is the actual call to start the infinite scroll
function RecentTweets() {
  const tweets = api.tweet.infiniteFeed.useInfiniteQuery({}, {getNextPageParam: lastPage => {lastPage.nextCursor; console.log(lastPage.nextCursor)}}); //If this can print from inside the return statement, it isn't, so maybe this line is f-ed up? I'm not sure the exact way useInfiniteQuery is used because this is my first time seeing it?

  return <InfiniteTweetList 
  tweets={tweets.data?.pages.flatMap((page) => page.tweets)} 
  isError={tweets.isError}
  isLoading={tweets.isLoading} 
  hasMore={tweets.hasNextPage} //This argument is throwing a type error boolean | undefined cannot be assigned to boolean, but his file also has an error here and it works? so could or could not be the issue?
  fetchNewTweets={tweets.fetchNextPage} />
}

Finally the InfiniteTweetList is it's own component declared as such:

import Link from "next/link"
import InfiniteScroll from "react-infinite-scroll-component"
import { ProfileImage } from "./ProfileImage"
import { useSession } from "next-auth/react"
import { VscHeartFilled, VscHeart } from "react-icons/vsc"
import { IconHoverEffect } from "./IconHoverEffect"

type Tweet = {
  id: string
  content: string
  createdAt: Date
  likeCount: number
  likedByMe: boolean
  user: { id: string; image: string | null; name: string | null}
}

type InfiniteTweetListProps = {
  isLoading: boolean
  isError: boolean
  hasMore: boolean //This property is odd
  fetchNewTweets: () => Promise<unknown>
  tweets?: Tweet[]
}

export function InfiniteTweetList({tweets, isError, isLoading, fetchNewTweets, hasMore}: InfiniteTweetListProps) {
    if(isLoading) return <h1>Loading...</h1>
    if(isError) return <h1>Error Loading Tweet</h1>
    if(tweets == null || tweets.length == 0) {
      return <h1 className="my-4 text-center text-2xl text-gray-500">There's Nothing Here...</h1>
    }

    return <ul>
      <InfiniteScroll
      dataLength={tweets.length}
      next={fetchNewTweets}
      hasMore={hasMore}
      loader={"Loading..."}>
        {tweets.map(tweet => {
          return <TweetCard key={tweet.id} {...tweet} />
        })}
      </InfiniteScroll>
    </ul>
}
//...To my knowledge the rest of the code in this function is visual and controls for the tweet, doesn't actually relate to pulling the tweets or infinite scroll
}

I know this question is damn lengthy but I'm really not sure what's happening and why this isn't working, again any and all help is very greatly appreciated!