In user dashboard, on ad click, take user to edit page

// components/cards/UserAdCard.js
<Link to={`/user/ad/${ad.slug}`} className="nav-link">
// pages/user/ad/AdEdit.js
import { useEffect, useState } from "react";
import Sidebar from "../../../components/nav/Sidebar";
import { useParams } from "react-router-dom";
import axios from "axios";

export default function AdEdit() {
  // state
  const [ad, setAd] = useState({
    photos: [],
    uploading: "",
    price: "",
    address: "",
    bedrooms: "",
    bathrooms: "",
    carpark: "",
    landsize: "",
    type: "",
    action: "",
    title: "",
    description: "",
    loading: "",
  });
  // hooks
  const params = useParams();

  useEffect(() => {
    if (params?.slug) fetchAd();
  }, [params?.slug]);

  const fetchAd = async () => {
    try {
      const { data } = await axios.get(`/ad/${params.slug}`);
      setAd(data.ad); // {ad: {}, related: []}
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <div className="contaienr-fluid">
      <Sidebar />
      <h1 className="display-1 bg-primary text-light p-5">Edit Ad</h1>
      <pre>{JSON.stringify(ad, null, 4)}</pre>
    </div>
  );
}
// App.js
<Route path="user/ad/:slug" element={<AdEdit />} />