How to get props from with react router dom v6

I am trying to pass :id to url when i click a row of my table
trying using navigate("/edit/"+props); and onClick={() => handleClick(data.PacienteId)} but it didnt work then used useParams and created handleProceed to use it as onclick={handleProceed} but it still not working i just get url provided by Apiurl but /undefined

This is what i have in my routes

function App() {
  return (
    <>
      <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>
    </>
  );
}

This is my dashboard where i want to pass id to url clicking on table

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

  const handleClick = (props) => {
    /* navigate("/edit/" + props); */
    navigate(`/edit/${id}`);
  };
  const handleProceed = (e) => {
    /* history.push(`/edit/${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={handleProceed} */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>
    </>
  );
};