Hiding a react component in nested routes in react

Question

I am trying to hide a component in nested routes using pathname but could not achieve it. The global Navbar component is only hiding in my "/freelancer/freelancer-dashboard" but I want it to hide in nested components inside my freelancer-dashboard.

Here is my code:

In Navbar.js which contains

import React from "react";
import GlobalNavbar from "../DashBoard/Navigation/GlobalNavbar";
import { Outlet, useLocation } from "react-router-dom";

const Navbar = () => {
  const { pathname } = useLocation();
  return (
    <div>
      {pathname === "/freelancer/freelancer-dashboard"
        ? null
        : <GlobalNavbar />
      }
      <Outlet />
    </div>
  );
};

export default Navbar;

My app.js file which contains my routes:

 <Route path="/freelancer" element={<Navbar />}>
   <Route
     path="freelancer-dashboard"
     element={<FreelancerDashBoard />}
   >
     <Route path="home-feed" element={<MyHome />} />
     <Route path="my-gigs" element={<MyGigs />} />
   </Route>
 </Route>