如何移除Footer控件上方的空白区域？（Next.js+TS+Joy/MUI）

我正在使用TypeScript、Next.js以及Joy/Material UI框架，暗黑模式下页面底部出现一块奇怪的空白区域，截图如下：

Footer组件代码 #

import BottomNavigation from "@mui/material/BottomNavigation";

export default function Footer() {
  return (
    <BottomNavigation style={{ color: "gray", position: "sticky", bottom: 0, paddingTop: 50 }}>
      <center>Everything here is Copyright &copy; {new Date().getFullYear()} by Nick Hodges - All Rights Reserved</center>
    </BottomNavigation>
  );
}

布局组件代码 #

import Box from "@mui/joy/Box";
import Grid from "@mui/joy/Grid";
import NavBar from "./NavBar";
import { PropsWithChildren } from "react";
import { siteMetaData } from "../lib/siteMetaData";
import Head from "next/head";
import { useRouter } from "next/router";
import Footer from "./Footer";

export default function Layout(props: PropsWithChildren) {
  const router = useRouter();
  return (
    <>
      <Head>
        <title>{siteMetaData.title}</title>
        <meta name="robots" content="follow, index" />
        <meta name="description" content={siteMetaData.description} />
        <meta
          property="og:url"
          content={`${siteMetaData.siteUrl}${router.asPath}`}
        />
        <meta property="og:type" content="blog" />
        <meta property="og:site_name" content={siteMetaData.title} />
        <meta property="og:description" content={siteMetaData.description} />
        <meta property="og:title" content={siteMetaData.title} />
        <meta
          property="og:image"
          content={`${siteMetaData.siteUrl}${siteMetaData.ogImage}`}
          key={siteMetaData.ogImage}
        />
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content={siteMetaData.title} />
        <meta name="twitter:description" content={siteMetaData.description} />
        <meta
          name="twitter:image"
          content={`${siteMetaData.siteUrl}${siteMetaData.ogImage}`}
        />
        <link
          rel="canonical"
          href={`${siteMetaData.siteUrl}${router.asPath}`}
        />
      </Head>
      <Grid
        container
        spacing={2}
        sx={{
          maxWidth: "1000px",
          display: "flex",
          flexGrow: 1,
          flexDirection: { xs: "column", md: "row" },
          mx: "auto",
          mt: { xs: "2rem", md: "6rem" },
          p: "2rem",
        }}
      >
        <Grid xs={12} md={4}>
          <NavBar />
        </Grid>
        <Grid xs={12} md={8}>
          <Box>{props.children}</Box>
          <Footer />
        </Grid>
      </Grid>
    </>
  );
}

主题配置代码 #

import { extendTheme } from "@mui/joy/styles";

const theme = extendTheme({
  fontFamily: {
    body: "'Public Sans', var(--joy-fontFamily-fallback)",
  },
});

export default theme;

我无法消除这块空白区域，也不清楚其出现的原因，希望得到技术指导，如需更多信息可提供。

内容的提问来源于stack exchange，提问作者Nick Hodges