Data is lost on page refresh - reactjs

Question

I am developing a web application using MERN stack. I am using Redux Toolkit for state management.
I display a list of blog posts on the homepage.
When I click on the view button, I am taken to the page for that particular post.
However, when I refresh the page, I no longer see the post.
Why it it happening?
The following are my code snippets:
src/components/ViewPost.js
import React from "react";
import { useSelector } from "react-redux";
const ViewPost = ({ match }) => {
const post = useSelector((state) =>
state.posts.posts.find((post) => post._id === match.params.id)
);
return (
<div>
{post ? (
<div className="row mt-5">
<div className="col-md-8 mx-auto">
<article>
<h3 className="">{post.title}</h3>
<h6 className="text-muted mb-3">
by Hemanta Sundaray | {new Date().toISOString().slice(0, 10)}
</h6>
<div className="col mb-3 post-border"></div>
<p>{post.body}</p>
</article>
</div>
</div>
) : (
<h3 className="text-center mt-5">POST NOT FOUND</h3>
)}
</div>
);
};
export default ViewPost;