React-router-dom в mui. Не получается подключить Link и сделать перенаправление

Header.jsx
import React from "react";
import styles from './Header.module.css'
import Button from '@mui/material/Button';
import { Avatar, Container, Stack } from "@mui/material";

const Header = () => {
    return (
            <div className={styles.root}>
            <Container>
                <div className={styles.Header}>
                    <Button variant="outlined" sx={{ mr: 180 }}  style={{ color: '#555555', border: '1px solid #555555', textDecoration: 'none'}}>FATTAHOV BLOG</Button>
                    <Stack className={styles.buttonAuth} spacing={2} direction="row">
                        <Button variant="outlined" style={{ color: '#555555', border: '1px solid #555555', textDecoration: 'none'}}>LOGIN</Button>
                        <Button variant="outlined" style={{ color: '#555555', border: '1px solid #555555', textDecoration: 'none'}}>SIGN IN</Button>
                        <Avatar alt="Travis Howard" src="https://mui.com/static/images/avatar/2.jpg" />
                    </Stack>
                </div>
                
            </Container>
            
            </div>
        
    )
}

export default Header


App.jsx
import './App.css'
import Post from './components/Post/Post'
import Header from './components/Header/Header'
import { Route, Routes } from 'react-router-dom'
import LoginInSide from './components/Auth/Login/Login'



function App() {
  return (
    <>
      <Header />
      <Routes>
        <Route path='/login' element={<LoginInSide />}></Route>
        <Route path='/home' element={<Post />}></Route>
      </Routes>      {/* <Tags />
      <Comments /> */}
    </>
  )
}

export default App