Как по нажатию на конкретную карту переходить на страницу с информацией о ней. React

React + firebase. Начал изучать react в боевом крещении, но сейчас я не имею представления реализовать следующую фичу: Имеются карты с ресторанами и я хочу сделать, что бы при нажатии на какой то ресторан, я попадал на страничку с меню этого ресторана.

Соответсвенно вопрос в том, как мне из этого компонента передать идшник, что бы в другом компоненьте используя этот идшник я мог обратиться к бд и отрендерить всю информацию о выбранном ресторане.

import React, {useState,useEffect} from 'react';
import './profile.css'
import './Profile.js'
import { getDatabase, ref, child, get,onValue } from "firebase/database";
import './Restaraunts.css'
import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import { experimentalStyled as styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid';

const Item = styled(Paper)(({ theme }) => ({
  backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
  ...theme.typography.body2,
  padding: theme.spacing(2),
  textAlign: 'center',
  color: theme.palette.text.secondary,
}));
// import Profile from './Profile';


function Restaraunts(){

  const db = ref(getDatabase(), "Restaurants/");
  const [data, setData] = useState([])
  useEffect(()=>{ 
    onValue(db, (snapshot) => {
      const currentData = snapshot.val();
      setData(currentData);
    });
}, [data])



  let list = []
  for( let i =0;i<=data.length;i++){
    if (data[i] === undefined){
      continue
    }
    else{
      console.log(data[i])
      list.push(data[i])
    }

  }
  console.log(list)

  return(
    <div className="restaraunts">
      <Box sx={{ flexGrow: 1 }}>
      <Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
      {list.map((restaraunt) => (
          <Grid item xs={2} sm={4} md={4} key={restaraunt.name}>
            <Card sx={{ maxWidth: 345 }}>
        <CardMedia
          component="img"
          alt=""
          height="140"
          image = {restaraunt.img}
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="div">
            {restaraunt.name}
          </Typography>
          <Typography variant="body2" color="text.secondary">
            {restaraunt.desc}
          </Typography>
          <Typography variant="body3" color="text.secondary">
            Price: {restaraunt.price}
          </Typography>
          <Typography variant="body3" color="text.secondary">
            Average Time: {restaraunt.avgTime}
          </Typography>
        </CardContent>
      </Card>
          </Grid>
        ))}
      </Grid>
    </Box>
    </div>

  )
}

export default Restaraunts

бд с ресторанами:

бд с меню конкрентного ресторана: