useMediaQuery lg Theme Breakpoint Not Breaking at 1280px - reactjs

Question

I'm trying to create an Ad component on the right hand side of the Page component that disappears whenever the screen size gets below 1280px (MUI lg). Without adding height or content, this works fine, but when the components have a height of 600px or so, the breakpoint shortens to about 1200px. This causes the Ad component to snap below the Page for about 80px or so.
Here's a codesandbox of my desired outcome: code
Here's a codesandbox of what's currently happening when I add height & content: code
(adjust the screen width to see what I'm talking about)
Here's my code:
import useMediaQuery from "#mui/material/useMediaQuery";
import { useTheme } from "#mui/material/styles";
import Box from "#material-ui/core/Box";
import { Grid } from "#material-ui/core";
export default function App() {
const theme = useTheme();
const lgScreen = useMediaQuery(theme.breakpoints.up("lg"));
return (
<Box p={5}>
<Grid container spacing={3}>
<Grid item xs={12} sm={12} md={12} lg>
<Box sx={{ bgcolor: "warning.main", height: "600px" }}>Page</Box>
</Grid>
<Grid item style={{ width: 335 }}>
{lgScreen ? (
<Box sx={{ bgcolor: "secondary.main", height: "600px" }}>Ad</Box>
) : null}
</Grid>
</Grid>
</Box>
);
}