Would appreciate if someone could help me understand the problem. I have a simple webpage with MUI components, and I would like to add a sticky footer at the very bottom.

However, the footer ends up in the middle of the page with the following structure of the App.jsx:

function App() {
  return (
    <BrowserRouter>
    <Header />
      <ThemeProvider theme={theme}>
        <Container component='main' sx={{ padding: '0px!important', maxWidth: '100%!important' }}>
        <Box>
          <Routes>
            <Route path='/' element={<Home/>}/>
          </Routes>
        </Box>
        </Container>
      </ThemeProvider>
    <Footer />
    </BrowserRouter>
  )
}

and the following Footer.jsx:

export default function Footer () {
  return (
    <Box
      display={'flex'}
      flexDirection={'column'}
      width={'100vw'}
      height={'100vh'}
      component={'footer'}
     >
       <Box
         height={'200px'}
         display={'flex'}
         justifyContent={'center'}
         alignItems={'center'}
         sx={{ backgroundColor: '#333' }}
       >
         <Typography> © 2023 DS </Typography>
       </Box>
     </Box>
  )
}

This is how it looks like:

When I move Footer.jsx to the Home.jsx, the footer ends up at the bottom where it should be.

Home.jsx

export default function Home () {
  return (
    <Box
      display={'flex'}
      flexDirection={'column'}
      height={'100vh'}
      width={'100vw'}
    >
      <Hero />
      <Slider />
      <Logos />
      <Services />
      <Banner />
      <Portfolio />
      <Contact />
      <Footer />
    </Box>
  )
}

And this is how it should look like:

Why placing <Footer /> component in the App.jsx does not work in the same way?