Conditional Routing Not working – using react router

i’d love some help with this. Its been driving me crazy for a couple of days. I”m
trying to route to a component based on a condition and it does it, but only if i refresh the page. I’ve had to add forceUpdate() to get it to work, but that is killing performance. Maybe this is something that would stand out easily for you guys, but for me it is scaping. any help would be appreciated. the following route is the one in question

<Route element={<RequireAuth />}>
        {/* <Route path="/" element={<InvoiceList2 />} /> */}
        <Route
          path="/"
          element={userrole === "Browser" ? <ViewOnly /> : 
    <InvoiceList2 />}
        />
</Route>

full code below:

import React, { useEffect, useState, useReducer } from "react";
import { BrowserRouter, Routes, Route, Navigate } from "react- 
router-dom";
    
import {
  useFetchVendorsQuery,
  useFetchInvoicesQuery,
  useFetchTrackersQuery,
} from "../src/features/Invoices/InvoiceSlice";

const ROLES = {
  User: "user",
  Admin: "Admin",
};

const Wildcard = () => {
  <Navigate to="/login" />;
};

const App = () => {
  // const auth = useAuth();
  // let { user, role, userid } = auth.auth;

  const GetVendors = useFetchVendorsQuery();
  const [vendors, setVendors] = useState([]);

  const GetTrackers = useFetchTrackersQuery();
  const [trackers, setTrackers] = useState([]);

  const GetInvoices = useFetchInvoicesQuery();
  const [invoices, setInvoices] = useState([]);
  const [userrole, setUserRole] = useState("");

  const User = JSON.parse(localStorage.getItem("user"));

  const [ignored, forceUpdate] = useReducer((x) => x + 1, 0);

  const handleOnload = () => {
    forceUpdate();
  };

  useEffect(() => {
    // setVendors(GetVendors);
    // setInvoices(GetInvoices);
    // setTrackers(GetTrackers);
    setUserRole(User?.role);
    forceUpdate();
  }, [userrole, ignored]);

  return (
    <div className="content">
      <BrowserRouter>
        {/* <Header /> */}
        <Routes>
          <Route path="/login" element={<Login />} />
          <Route path="/register" element={<Registration />} />
          <Route element={<RequireAuth />}>
            {/* <Route path="/" element={<InvoiceList2 />} /> */}
            <Route
              path="/"
              element={userrole === "Browser" ? <ViewOnly /> : <InvoiceList2 />}
            />
          </Route>
          <Route element={<RequireAuth />}>
            <Route path="/admin" element={<Admin />} />
          </Route>
          <Route element={<RequireAuth />}>
            <Route path="/manual" element={<ManualEntry />} />
          </Route>
          <Route path="/*" element={Wildcard} />
        </Routes>
        <Footer1 />
      </BrowserRouter>
    </div>
    );
  };

 export default App;