How to reuse props used previously to navigate to url using react router v6

I have this route <Route path="/edit/:id" exact element={<Editar />} /> where i can redirect from <Dashboard>. I dont have any error redirecting to /edit/idClickedOnDashboard but once i redirected to <Editar> i want to reuse this idClickedOnDashboard (to make an url to call API) using props.match.params.id but error says props.match is undefined

Routes:

<BrowserRouter>
        <Routes>
          <Route path="/" exact element={<Login  />} />
          <Route path="/dashboard" exact element={<Dashboard  />} />
          <Route path="/new" exact element={<Nuevo  />} />
          <Route path="/edit/:id" exact element={<Editar />} />
        </Routes>
      </BrowserRouter>

On Dashboard

export const Dashboard = (props) => {
  const [paciente, setPaciente] = useState([]);
  const navigate = useNavigate();
  useEffect(() => {
    let url = `${Apiurl}pacientes?page=1`;
    axios.get(url).then((response) => {
      setPaciente(response.data);
    });
  }, []);

  const handleClick = (id) => {
    navigate(`/edit/${id}`);
  };

  return (
    <>
      <Header />
      <div className="container">
        <table className="table table-dark table-hover">
          <thead>
            <tr>
              <th scope="col">ID</th>
              <th scope="col">DNI</th>
              <th scope="col">NOMBRE</th>
              <th scope="col">TELEFONO</th>
              <th scope="col">CORREO</th>
            </tr>
          </thead>
          <tbody>
            {paciente.map((data, i) => {
              return (
                <tr key={i} onClick={() => handleClick(data.PacienteId)}>
                  <td>{data.PacienteId}</td>
                  <td>{data.DNI}</td>
                  <td>{data.Nombre}</td>
                  <td>{data.Telefono}</td>
                  <td>{data.Correo}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </>
  );
};

Finally where i get error Editar.jsx

import React, { useEffect } from "react";
import { useParams } from "react-router-dom";

import { Apiurl } from "../services/api";

export const Editar = (props) => {
  //const { id } = useParams();
  useEffect(() => {
    let pacienteId = props.match.params.id;
    let url =`${Apiurl}pacientes?id=${pacienteId}`;
    console.log(url);
  }, []);





  return <div>Editar</div>;
};

Error
error