Использование Link в react-router-dom на React. При использовании Link в данном коде, все кнопки, текст, все полностью пропадает, не разобраться

import React from "react";
import styles from './Header.module.css'
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';
import { Avatar } from "@mui/material";
import { Link } from "react-router-dom";

const Header = () => {
    return (
        <div className={styles.Main}>
            <Box>
                <AppBar className={styles.AppBar} position="static" style={{ backgroundColor: '#555555' }}>
                    <Toolbar>
                    <IconButton
                        size="large"
                        edge="start"
                        color="inherit"
                        aria-label="menu"
                        sx={{ mr: 2 }}
                    >
                        <MenuIcon />
                    </IconButton>
                    <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
                        <Link to='/posts'>
                            FATTAHOV BLOG
                        </Link>    
                    </Typography>
                    <Button color="inherit">Login</Button>
                    <Button color="inherit">Registr</Button>
                    <Avatar alt="Remy Sharp" src="https://mui.com/static/images/avatar/2.jpg" />
                    </Toolbar>
                    
                        
                </AppBar>
            </Box>
        </div>
    )
}

export default Header