passing Props through link componet

this is my line of code where iam mapping some items fetching from API

<div style={{ display:"flex",flexWrap:"wrap",justifyContent:"center"}}>
{games.length===0?<p className='nomatch'>No Matching Results</p>:games.map(({title,thumbnail,id,gameurl,freetogame_profile_url,platform,short_description,publisher,developer
})=>{

  return <div  key={id} style={{display: 'flex', justifyContent: 'center'}} >
  <div style={{width: '300px', height: '300px', backgroundColor: '#fff',margin:"20px", borderRadius: '5px', display: 'flex', flexDirection: 'column', alignItems: 'center', boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.1)',border:"2px solid rgb(245, 6, 133)"}}>
    <img src={thumbnail} alt="Game 1" style={{width:"297px",height:"187px"}} />
    <h3 style={{textAlign: 'center'}}>{title}</h3>
    <div style={{display: 'flex', justifyContent: 'space-around',marginTop:"12px",  width: '100%'}}>
    <Link to={{
  pathname: `/games/${id}`,
  state: {short_description:short_description}
}}>
      <button style={{backgroundColor: 'rgb(245, 6, 133)', color: '#fff', padding: '10px 20px', borderRadius: '5px', border: 'none', cursor: 'pointer'}}>View</button>
     </Link>

When we click link componet we will be directed to GameDetail.js Componet in my app how i will used these state values in my GameDetail.js Componet plz help me if there is any particular concept