// Sidebar.js
<li className="nav-item">
  <NavLink className="nav-link" to="/user/enquiries">
    Enquiries
  </NavLink>
</li>
// pages/user/Enquiries.js
import { useEffect, useState } from "react";
import Sidebar from "../../components/nav/Sidebar";
import axios from "axios";
import AdCard from "../../components/cards/AdCard";
import { useAuth } from "../../context/auth";

export default function Enquiries() {
  // context
  const [auth, setAuth] = useAuth();
  // state
  const [ads, setAds] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (auth?.token) fetchEnquiriedProperties();
  }, [auth?.token]);

  const fetchEnquiriedProperties = async () => {
    try {
      const { data } = await axios.get(`/enquiried-properties`);
      console.log(data);
      setAds(data);
      setLoading(false);
    } catch (err) {
      console.log(err);
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <div
        className="d-flex justify-content-center align-items-center vh-100"
        style={{ marginTop: "-7%" }}
      >
        <div className="display-1">Loading...</div>
      </div>
    );
  }

  return (
    <div className="contaienr-fluid">
      <Sidebar />
      <div className="container mt-2 text-center">
        <h1>{ads.length} enquiried properties</h1>
      </div>

      <div className="container">
        <div className="row">
          {ads?.map((ad) => (
            <>
              <AdCard ad={ad} />
            </>
          ))}
        </div>
      </div>
    </div>
  );
}
// App.js
<Route path="/user/enquiries" element={<Enquiries />} />