Next.js - When I Refresh the page styling of Fluent UI dissappears

Question

I am trying to learn Fluent UI, but it doesn't work well. I searched the documentation, and wrote the same codes, but I always get the same result. When I refresh the page, styling disappears and I see an ugly Nav. How can I solve this problem? Or where do I make mistake?

import { Nav, INavLink, INavStyles, INavLinkGroup } from '@fluentui/react/lib/Nav';
import { initializeIcons } from '@fluentui/font-icons-mdl2';


const navStyles: Partial<INavStyles> = {
    root: {
        width: "250px",
        height: "100vh",
        boxSizing: 'border-box',
        border: '1px solid #eee',
        fontSize: 20,
        color: "white",
        backgroundColor: "green"
    },
};

const navLinkGroups: INavLinkGroup[] = [
    {
        links: [
            {
                name: 'Dashboard',
                url: '/',
                key: 'key3',
                
            },
            {
                name: 'Components',
                url: '/',
                key: 'key4',
                
            },
            {
                name: 'Pages',
                url: '/',
                key: 'key6',
                
            },
            {
                name: 'Tables',
                url: '/',
                key: 'key7',
                
            },
        ],
    },
];



const Admin: React.FC = () => {
    initializeIcons();

    return (
        <div>
            <Nav    
                ariaLabel="Nav basic example"
                styles={navStyles}
                groups={navLinkGroups}
                selectedKey="key3"
            />
        </div>
    )

}

export default Admin;