How to make my functional Post component have certain linkable properties? - reactjs

Question

I'm new to React and haven't learned how to use databases and other functions as of yet and this is my first major learning React project. I'm trying to make my functional Post component link/route to a /profile/uniqueTweetId. Here is my Post component, to show you how I have set it up.
function Post({displayName,username,verified,text,image,avatar,comments,shares,likes,twitterId}) {
return (
<div className = "post">
<div className = "post__avatar">
<Avatar src={avatar} />
</div>
<div className = "post__body">
<div className = "post__header">
<div className = "post__headerText">
<h3>
{displayName} {""}
<span className = "post_headerSpecial">
{verified && <VerifiedUserIcon className="post__badge" />} #
{username}
</span>
</h3>
</div>
<div className = "post__headerDescription">
<p>{text}</p>
</div>
<img src= {image} alt= "" />
<div className = "post__footer">
<span className ="post__chatSpan"> <ChatBubbleOutlineIcon className = "post__chatStyling" fontSize="small" onClick={() => setCommentCount(commentCount + 1)} />
<span className = "post__chatFormating">{comments + commentCount} </span>
</span>
<span className ="post__repeatSpan"> <RepeatIcon className = "post__repeatStyling" fontSize="small" onClick={() => setRepeatCount(repeatCount + 1)} />
<span className = "post__repeatFormating">{shares + repeatCount}</span>
</span>
<span className ="post__favoriteSpan"> <FavoriteBorderIcon className = "post__favoriteStyling" fontSize="small" onClick={() => setLikeCount(likeCount + 1)} />
<span className = "post__favoriteFormating">{likes + likeCount}</span>
</span>
<PublishIcon fontSize="small" />
</div>
</div>
</div>
</div>
)
}
export default Post;
The problem arises when I render, the Post in my functional Feed component.
function Feed() {
return (
<Router>
<div className= "feed">
<Switch>
</Switch>
{/* Header */}
<div className= "feed__header">
<h2>Home</h2>
</div>
{/* TweetBox */}
<TweetBox />
{
listOfPosts.map(function (post) {
return (
< Post
displayName= {post.displayName}
username= {post.username}
verified= {post.verified}
text= {post.text}
avatar = "blah"
image = "blah"
comments = {post.comments}
shares = {post.shares}
likes = {post.likes}
twitterId ={post.twitterId}
/>
);
})
}
</div>
</Router>
)
}
export default Feed;
which listOfPosts is my array of hard coded "Post" prop variables that I'm currently looping through to render each post, so that in the future I could push the posts inside the array into a database when I'm ready. I'm struggling because I don't understand how to use React router in this context, because if I use Link inside the map function, All the props become a link, and I lose the functionality of my counters. I was hoping for ideas on how to attack this problem and to make my components work like an actual twitter post. Sorry for the long post it's my first StackOverflow question. Thank you again, any help is greatly appreciated!