React router v5 renders only index page on all routes

ISSUE

• any route written manually in URL or triggered by button renders only index page (route name is changing, content of the page is always content of index)

App.js (handling all the main functions from the app)

// Exporting my router and passing all states/functions from App
 
<div className="App">
                    <Routes
                        ........
                        ........
                        ........
                        onRemove={onRemove}
                        setCartOpen={setCartOpen}
                        cartOpen={cartOpen}
                        .......
                        .......
/>
                </div>

Router (example of how my routes work)

export default function Routes({....., ....., onRemove,setCartOpen,cartOpen,..... })

 <Router>
            <Header
                countCartItems={cartItems.length}
                cartItems={cartItems}
                onAdd={onAdd}
                onRemove={onRemove}
                setCartOpen={setCartOpen}
            />
            <Suspense fallback={<Spinner />}>
                <Switch>
                    <Route
                        path={baseRouteUrl + '/'}
                        component={(props) => (
                            <IndexPage
                                {...props}
                                .......
                                .......
                                onRemove={onRemove}
                                setCartOpen={setCartOpen}
                                cartOpen={cartOpen}
                                .......
                                .......
                            />
                        )}>
                  </Route>
                <Route
                    path={baseRouteUrl + '/about'}
                    component={About}
                ></Route>
                <Route
                    path={baseRouteUrl + ''}
                    component={NotFound}
                ></Route>
.......

And Index.js

ReactDOM.render(
    <React.StrictMode>
        <QueryClientProvider client={client}>
            <ChakraProvider>
                <BrowserRouter>
                    <App />
                </BrowserRouter>
            </ChakraProvider>
        </QueryClientProvider>
    </React.StrictMode>,
    document.getElementById('root')
);

NOTE

• Before trying to pass props in the routes the router was working just fine

The reason I decided to structure my app this way is because I need my Header to be exported on all pages with all the functionalities.

Is there anything I should do in a different way? I know it might be a little messy, so I'll be grateful to learn how to handle it cleaner and most important, how to make it work so all routes will render the correct pages.