Beginner question ReactJs and router V6 and I learn react-router-dom and now I can't seem to navigate to another path/page

I have these routes:

const routes = [
    {
        path: 'app',
        element: ,
        children: [
            { path: 'account', element:  },
            { path: 'search', element:  },
            { path: 'dashboard', element:  },
            { path: 'create', element:  },
            { path: 'submissions', element:  },
            { path: 'inbox', element:  },
            { path: 'settings', element:  },
            { path: 'login', element:  },
            { path: 'register', element:  },
            { path: '*', element:  },
            { path: '/', element:  },
        ],
    },
    {
        path: '/',
        element: ,
        children: [
            { path: '404', element:  },
            { path: '*', element:  },
        ],
    },
];

export default routes;

When I'm here "https://localhost:6545/app/login"

In the picture I press the "sign up" and it should go here:

"https://localhost:6545/app/register"

But it does not it goes to "https://localhost:6545/app/login/register" and that is the When it should go to: https://localhost:6545/app/register

This is my code:

import React from 'react';
import { Link as RouterLink, useNavigate } from 'react-router-dom';
import * as Yup from 'yup';
import { Formik } from 'formik';
import {
  Box,
  Button,
  Container,
  Grid,
  Link,
  TextField,
  Typography,
  makeStyles
} from '@material-ui/core';
import FacebookIcon from '../../icons/Facebook';
import GoogleIcon from '../../icons/Google';
import Page from '../../components/Page';

const useStyles = makeStyles(theme => ({
  root: {
    backgroundColor: theme.palette.background.dark,
    height: '100%',
    paddingBottom: theme.spacing(3),
    paddingTop: theme.spacing(3)
  }
}));

const LoginView = () => {
  const classes = useStyles();
  const navigate = useNavigate();

  return (
    
      
        
           {
              navigate('/app/dashboard', { replace: true });
            }}
          >
            {({
              errors,
              handleBlur,
              handleChange,
              handleSubmit,
              isSubmitting,
              touched,
              values
            }) => (
              

                
                  
                    Sign in
                  
                  
                    Sign in on the internal platform
                  
                
                
                  
                    }
                      onClick={handleSubmit}
                      size="large"
                      variant="contained"
                    >
                      Login with Facebook
                    
                  
                  
                    }
                      onClick={handleSubmit}
                      size="large"
                      variant="contained"
                    >
                      Login with Google
                    
                  
                
                
                  
                    or login with email address
                  
                
                
                
                
                  
                    Sign in now
                  
                
                
                  Don't have an account?{' '}
                  
                    Sign up
                  
                
              
            )}
          
        
      
    
  );
};

export default LoginView;

What I'm I doing wrong?

UPDATE

This is the index.jsx:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import { FirebaseContext } from './firebase';
import store, { firebase } from './redux/store';

ReactDOM.render(
    
        
            
                
            
        
    ,
    document.getElementById('root'),
);

This is the App.jsx:

import React, { useEffect } from 'react';
import { AnimatePresence } from 'framer-motion';
import { connect } from 'react-redux';
import { compose } from 'recompose';
import { useRoutes } from 'react-router-dom';
import { ThemeContextProvider } from './theme/ThemeProvider';
import { getAlbumData } from './redux/albumData/albumData.actions';
import { getMetaData } from './redux/albumMetaData/albumMetaData.actions';
import { withAuthentication } from './session';
import './styles/index.css';
import routes from './routes';

const AnimatedSwitch = () => {
    const routing = useRoutes(routes);

    return (
        
            
{routing}
        
    );
};

const App = props => {
    const { getMeta, getAlbum } = props;

    useEffect(() => {
        getMeta();
        getAlbum();
    }, [getMeta, getAlbum]);

    return  {AnimatedSwitch()} ;
};
const mapDispatchToProps = dispatch => ({
    getMeta: () => dispatch(getMetaData()),
    getAlbum: () => dispatch(getAlbumData()),
});

export default compose(connect(null, mapDispatchToProps), withAuthentication)(App);

( sorry it's a big app) But up till now I only used the const navigate = useNavigate();. I mean useNavigate() of the router and that works good but now the Link I don't understand