Two boxes, one always vertically centered and one below [duplicate]

I need to have a vertically centered Box with content inside, and then an optional second Box underneath. When the second box is shown, the position of the first box should not change - to clarify, the position of the first box must always be in the direct center of the viewport.

The ideal solution will solely use flexbox, without relying on things like absolute/fixed positioning, etc.

Some code:

import { useState } from "react";import Container from "@mui/material/Container";import MuiBox from "@mui/material/Box";import Button from "@mui/material/Button";const Box = (props) => (<MuiBox sx={{ outline: "1px red solid" }} {...props}>    {props.children}</MuiBox>);export default function App() {  const [secondShown, setSecondShown] = useState(false);  const toggleShown = () => setSecondShown(!secondShown);  return (<Container><Box        id="outer-container"        sx={{          py: 2,          display: "flex",          flexDirection: "column",          justifyContent: "center",          alignItems: "center",          height: "100dvh",        }}><Box id="container"><Box id="first" sx={{ p: 2 }}><Box>first box - should always stay in the vertical center</Box><Button onClick={toggleShown} variant="outlined">              toggle 2nd box</Button></Box>          {secondShown && (<Box id="second" sx={{ p: 2 }}>              second box - should render without pushing the first box up</Box>          )}</Box></Box></Container>  );}