I'm having a problem with this error No routes matched location, all my navigation does that. Already tried implementing with this Solution, but still got the same error or Am I missing something here?

Here is my code:

App.tsx

<BrowserRouter>
      <Routes>
        <Route path="/" element={<LoginLayout />}>
          <Route index element={<SignInForm />} />
          <Route path="/signin" element={<SignInForm />} />
          <Route path="/newpassword" element={<NewPassword />} />
{/*some other routes here*/}
         </Route>
</Routes>
</BrowserRouter>

Here is my code for LoginLayout.tsx:

    function LoginLayout() {
  return (
    <div className="content">
      <Container className="signin-wrapper">
        <Row>
          <Col className="d-flex justify-content-center align-items-center">
            <ImageSection />
          </Col>
          <Col className="d-flex justify-content-center align-items-center">
            <Outlet />
          </Col>
        </Row>
      </Container>
    </div>
  );
}

export default LoginLayout;

I just post small part of my code, and my react-router-dom version is "react-router-dom": "^6.2.1",

Sample from console: