How to create a facebook like newsfeed?

I am working on a social media platform and have a feeds page, when user scroll down the feeds page we have to show the author, newsletter recommendations, currently I have hard coded this showing few posts then showing recommendation of author, then showing few more posts and then showing recommendation of newsletters. and then all the posts.

The thing I want to achieve is that, how I can show recommendation dynamically without hard-coding, like currently it is show during in between first few posts and then user will see the posts only. how I can inject these recommendation at run time at any given time like Facebook does.

import React, { useState } from 'react'
// Main App
export default function App() {
return (
<div>
{newsFeed?.posts?.slice(0, 3)?.map((tweet) => (
<Tweet
tweetClassName={tweetClassName}
key={tweet?._id}
tweet={tweet}
user={user}
/>
))}
{!adminManagedDataLoading?.readingPageManagment?.authors && (
<PremiumAuthorsSectionWrapper />
)}
<div>
{newsFeed?.posts?.slice(3, 6)?.map((tweet) => (
<Tweet
tweetClassName={tweetClassName}
key={tweet?._id}
tweet={tweet}
user={user}
/>
))}
</div>
{adminManagedData?.readingPageManagment?.newsLetters?.length > 1 &&
!adminManagedDataError && (
<div className="w-[95%] sm:w-full mx-auto">
{/*
<NewsLetterCarousel
newsLettersList={
adminManagedData?.readingPageManagment?.newsLetters
}
/>
*/}
<AllNewslettersSectionWrapper intractive={true} />
</div>
)}
<InfiniteScroll
dataLength={newsFeed?.posts.length || 0}
next={fetchPosts}
hasMore={hasMore}
loader={<TweetSkeleton />}
refreshFunction={fetchPosts}
pullDownToRefresh
pullDownToRefreshThreshold={50}
{newsFeed?.posts?.slice(12)?.map((tweet) => (
<Tweet
tweetClassName={tweetClassName}
key={tweet?._id}
tweet={tweet}
user={user}
/>
))}
</InfiniteScroll>
</div>
)
}