How to show list of real estate agents in React?

// components/nav/Menu.js
<li>
<NavLink className="nav-link" to="/agents">
  Agents
</NavLink>
</li>

// App.js
<Route path="/agents" element={<Agents />} />

// pages/Agents.js
import { useState, useEffect } from "react";
import axios from "axios";
import UserCard from "../components/cards/UserCard";

export default function Agents() {
  const [agents, setAgents] = useState([]);
  const [loading, setLoading] = useState(true);

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

  const fetchAgents = async () => {
    try {
      const { data } = await axios.get("/agents");
      setAgents(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>
      <h2 className="display-1 bg-primary text-light p-5 h1">Agents</h2>
      <div className="container">
        <div className="row">
          {agents?.map((user) => (
            <UserCard user={user} key={user._id} />
          ))}
        </div>
      </div>
    </div>
  );
}

// components/cards/UserCard.js
import { Badge } from "antd";
import { Link } from "react-router-dom";
import Logo from "../../logo.svg";
import dayjs from "dayjs";

import relativeTime from "dayjs/plugin/relativeTime";
dayjs.extend(relativeTime);

export default function UserCard({ user }) {
  return (
    <div className="col-lg-4 p-4 gx-4 gy-4">
      <Link to={`/user/${user.username}`} className="nav-link">
        <Badge.Ribbon text={`x listing`}>
          <div className="card hoverable shadow">
            <img
              src={user?.photo?.Location ?? Logo}
              alt={user.username}
              style={{ height: "250px", objectFit: "cover" }}
            />

            <div className="card-body">
              <div className="d-flex justify-content-between">
                <h3>{user?.username ?? user?.name}</h3>
              </div>

              <p className="card-text">
                Joined {dayjs(user.createdAt).fromNow()}
              </p>
            </div>
          </div>
        </Badge.Ribbon>
      </Link>
    </div>
  );
}