Ads for sell, list as Buy

// components/nav/Main.js
<li>
  <NavLink className="nav-link" to="/buy">
    Buy
  </NavLink>
</li>
<li>
  <NavLink className="nav-link" to="/rent">
    Rent
  </NavLink>
</li>
// App.js
<Route path="/buy" element={<AdsForSell />} />
<Route path="/rent" element={<AdsForRent />} />
// pages/AdsForSell.js
import { useState, useEffect } from "react";
import { useAuth } from "../context/auth";
import axios from "axios";
import AdCard from "../components/cards/AdCard";

export default function AdsForSell() {
  const [ads, setAds] = useState([]);

  useEffect(() => {
    fetchAds();
  }, []);

  const fetchAds = async () => {
    try {
      const { data } = await axios.get("/ads-for-sell");
      setAds(data);
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <div>
      <h2 className="display-1 bg-primary text-light p-5 h1">For Sell</h2>
      <div className="container">
        <div className="row">
          {ads?.map((ad) => (
            <AdCard ad={ad} key={ad._id} />
          ))}
        </div>
      </div>
    </div>
  );
}
// pages/AdsForRent.js
import { useState, useEffect } from "react";
import { useAuth } from "../context/auth";
import axios from "axios";
import AdCard from "../components/cards/AdCard";

export default function AdsForRent() {
  const [ads, setAds] = useState([]);

  useEffect(() => {
    fetchAds();
  }, []);

  const fetchAds = async () => {
    try {
      const { data } = await axios.get("/ads-for-rent");
      setAds(data);
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <div>
      <h2 className="display-1 bg-primary text-light p-5 h1">For Rent</h2>
      <div className="container">
        <div className="row">
          {ads?.map((ad) => (
            <AdCard ad={ad} key={ad._id} />
          ))}
        </div>
      </div>
    </div>
  );
}