BottomNav do MaterialUI sumindo sozinha

Criei alguns componentes simples, mas por alguma razão toda vez que eu dou refresh na página meu bottomnav some.

O que está acontecendo?

Componente BottomBar

import { BottomNavigation, BottomNavigationAction } from "@material-ui/core";
import { corEscura } from "../../../styles/UI/variables";
import styled from "styled-components";
import HomeIcon from "@material-ui/icons/Home";
import LibraryBooksIcon from "@material-ui/icons/LibraryBooks";
import GroupIcon from "@material-ui/icons/Group";

const StyledBottomNav = styled(BottomNavigation)`
  && {
    background-color: ${corEscura};
    position: absolute;
    bottom: 0;
    width: 100%;
  }
`;

const StyledHomeIcon = styled(HomeIcon)`
  && {
    color: white;
  }
`;

const StyledBooksIcon = styled(LibraryBooksIcon)`
  && {
    color: white;
  }
`;

const StyledGroupIcon = styled(GroupIcon)`
  && {
    color: white;
  }
`;

function BottomNav() {
  return (
      <StyledBottomNav>
        <BottomNavigationAction label="Teste" icon={<StyledHomeIcon />} />
        <BottomNavigationAction label="Teste" icon={<StyledBooksIcon />} />
        <BottomNavigationAction label="Teste" icon={<StyledGroupIcon />} />
      </StyledBottomNav>
  );
}

export default BottomNav;

Componente NavBar

import React from "react";
import styled from "styled-components";
import { AppBar, Toolbar } from "@material-ui/core";
import {corEscura} from '../../../styles/UI/variables'

const StyledNavBar = styled(AppBar)`
    && {
        background-color: ${corEscura};
    }
`

function NavBar() {
  return (
    <StyledNavBar>
      <Toolbar></Toolbar>
    </StyledNavBar>
  );
}

export default NavBar;

GlobalStyle:

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
*{
    margin: 0;
    padding: 0;
}
`;

export default GlobalStyle;

Home:

import Head from "next/head";
import NavBar from "../src/Components/NavBar";
import BottomNav from "../src/Components/BottomBar";
import GlobalStyle from "../styles/GlobalStyle";

export default function Home() {
  return (
    <>
    <GlobalStyle/>
      <NavBar></NavBar>
      <BottomNav></BottomNav>
     </>
  );
}

MyApp

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp;

A BottomNav fica sumindo e voltando sozinha. O que está acontecendo?