How to carry snackbar over to next page

Question

I'm working on a form and I want to redirect to the home page upon submission. I also want a snackbar to appear upon submission, however, the snackbar will only appear on my form page. When it gets redirected, the snackbar disappears. Is there a way I can have the snackbar remain onscreen even after it redirects?

export default function Form() {
    const {register, handleSubmit} = useForm();
    const [open, setOpen] = useState(false);
    const history = useHistory();
    const handleClose = () => {
      setOpen(false);
    }
    const redir = (data) => {
        console.log(data);
        history.push('/')
        setOpen(true);
        console.log(open);
        }  
   return (
        <div>
            <Navbar />
            <form className="form" onSubmit={handleSubmit(redir)}>
                <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
                    <Alert severity='success' onClose={handleClose}>
                        Success! Your message has been sent.
                    </Alert>
                </Snackbar>

Answer 1

You should call Snackbar component with [open, setOpen] not in the Form, but in the Parent component and pass setOpen to the Form and call it in redir function.