React-router-dom TypeError: n is not a function on route, reloading page works

Question

When I click a any route, the page doesn't render and throws an error - TypeError: n is not a function located in the react-dom.production.min.js file. I am using React-Router V6.

App.js

function App() {
return (
    <BrowserRouter>
        <div className="Orchard Inbound Orders">
            <Navbar />
            <div className="container">
                <Routes>
                    <Route exact path="/" element={<UploadOrdersPageHome />} />
                    <Route exact path="/admin-users" element={<AdminPageUsersTab />} />
                    <Route exact path="/admin-clients" element={<AdminPageClientsTab />} />
                    <Route exact path="/create-client" element={<CreateClientPage />} />
                    <Route exact path="/edit-client/:rowkey" element={<EditClientPage />} />
                </Routes>
            </div>
        </div>
    </BrowserRouter>
);

navbar.js

const Navbar = () => {
return (
    <div>
        <nav className="navbar mx-auto text-center border-bottom border-secondary rounded border-solid bg-light">
            <div className="col-2 col-xl-1">
                <Link to="/">
                    <img className="fit-image" alt="CaptureDx" src={require('../images/[email protected]')} />
                </Link>
            </div>
            <h3 className="col-2 my-auto nav-text-header">
                <Link to="/">Upload Orders</Link>
            </h3>
            <h3 className="col-2 my-auto">
                <Link to="/admin-clients">Admin</Link>
            </h3>
            <h3 className="col-2 my-auto">
                <a className="cursor-pointer" href="/">
                    username
                </a>
            </h3>
            <div className="col-2 my-auto text-right">
                <button className="btn btn-lg btn-outline-primary">
                    <a href="/">Log Out</a>
                </button>
            </div>
        </nav>
    </div>
);

Errors

Href="/" works fine for links to pages, but the router doesn't. I would like to use this to later pass props to Components when routing.

Answer 1

Solved

I was using the UseEffect hook as an async without declaring a function and then calling it.

Original:

    useEffect(async () => {
    const response = await fetch(`http://localhost:3000/orders`);
    const data = await response.json();
    const sortedData = data.sort((a, b) => (a.properties.createdOn < b.properties.createdOn ? 1 : -1));
    setFiles(sortedData);
}, []);

Updated:

    useEffect(() => {
    const loadOrders = async () => {
        const response = await fetch(`http://localhost:3000/orders`);
        const data = await response.json();
        const sortedData = data.sort((a, b) => (a.properties.createdOn < b.properties.createdOn ? 1 : -1));
        setFiles(sortedData);
    };
    loadOrders();
}, []);

The pages now render correctly and all pages can be routed to