useEffect is not triggering after routing

Question

I am very new when it comes to using react hooks, rendering, and routing.

App.js

function App() {
  return (
    <div className="App">
      <Navbar />
    </div>
  );  
}

Navbar.js

export default function Navbar() {
    return(
        <BrowserRouter>
            <Routes>
                <Route path = '/:page' element = {<Header/>} />
                <Route path='/' element={<Header/>} />

                <Route exact path='' element = {<Home/>}/>
                <Route exact path='home' element = {<Home/>}/>
                <Route exact path='players' element = {<BasicTable/>}/>
                <Route exact path='about' element = {<About/>}/>
                <Route path="*" element={<Home />} />
            </Routes>
        </BrowserRouter>
    )
}

BasicTable.js

const getObj = async () => {
    const value = await axios.get(...);
    return value;
}

export function BasicTable(){
    const [obj, setObj] = useState();

    console.log("getting object");
    useEffect (()=> {
        console.log("using Effect");
        setObj(getObj());
    }, []);

    //Rest of the code below this...
}

I am trying to get the axios get call to trigger everytime someone navigates to the basic table page (/players page). If I just insert the axios.get call naked into the basic table function, this causes an infinite loop of api get calls. Now I am using the useEffect hook, but it never triggers when I navigate to "/players". In fact, it never triggers. The only thing I see is the "getting objects" console log, but never "using Effect". Am I missing an important part of useEffect?