When I submit form the data should display on other page . How I can get the data from redux store in functional component and show the display on page I have created 2 components one is App.js and other one is Showdata.js , when I click on Submit then the page redirect to Showdata.js component then the submitted data get display.

import {useEffect} from "react"
import {useNavigate} from 'react-router-dom'
import { Link } from "react-router-dom";
import { getContact } from "./action/contactAction";
import { connect} from 'react-redux';
// import Store from "./store/configure";

function Showdata(props){
    const nav = useNavigate();
    const onUnload=()=>{
        nav("/");        
    }
    // useEffect(()=>{
    //     window.addEventListener("beforeunload",onUnload);
    //     return()=>{
    //         window.removeEventListener("beforeunload",onUnload);
    //     }
    // },[])
   function createListIteams(){
        return props.contacts.map((contacts)=>{
            return<li>
                {contacts.firstname}</li>
        });
    }
       
    return(
         
        <div>
            <ul>
                {createListIteams()}
            </ul>
            <h1>
            <button className="btn btn-primary"  onClick={onUnload}><Link to='/'></Link>Home</button>
            </h1>
            
        </div>
    )
}
const mapStateToProps=(state)=>{
    // console.log(state)
 
    return{
        contacts:state.formData
        
    }
};

const mapDispatchToProps=(dispatch)=>{
    
    return{
        getContact: contact =>dispatch(getContact(contact))
        
    }
};

export default connect(mapStateToProps,mapDispatchToProps)(Showdata);
 // This is the Showdata.js File and I want to access the redux Store data and get that data and Display.