ReactJS: How to clear state values from useLocation after page reload

I have this scenario, I have a create page, when user is done from create page it will automatically navigate to list page, in my create page I have set some state values the will be used in list page. From that point everything is working fine. But when I try to reload the list page, the state values is still there but when I try to navigate to other pages and go back to list page the state values is cleared, how can I make state values clear when list page is reloaded after setting state values from create page?

Create Page code:

import { Link, useNavigate } from "react-router-dom";

const CreatePage = () => {
const navigate = useNavigate();
const handleSubmit = async (e: any) => {
//some code here
if (res.status === 201) {
              navigate("/post", {
                state: {
                  status: true,
                  message: "Post successfully created.",
                },
                replace: true,
              });
            }

});

};

List Page code:

import { Link, useLocation } from "react-router-dom";
    interface LocationState {
      status: boolean;
      message: string;
    }
    
    const ListPage = () => {
      const location = useLocation();
      const state = location.state as LocationState;
    
    return(
    //some html here
    <Col>
              {state?.status && <ToastNotificationBasic message={state?.message} />}
            </Col>
    );
    };

And because of that, the toast message always showing everytime list page is reload. What am i missinge here? Thank you!