The existing answers did not work, but modifying them did, and here is my solution for others to solve this problem.

  const [open, setOpen] = useState(false);
  const containerRef = useRef(null);

  return (
    <Box
      ref={containerRef}
      sx={{
        width: "500px",
        height: "300px",
        border: "1px solid black",
        margin: "50px auto",
        position: "relative",
        overflow: "hidden",
      }}
    >
      <p>This is the container for the drawer.</p>
      <Button onClick={() => setOpen(true)}>Open Drawer Inside</Button>

      <Drawer
        open={open}
        onClose={() => setOpen(false)}
        anchor="left"
        variant="temporary"
        container={containerRef.current}
        ModalProps={{
          container: containerRef.current,
          disablePortal: true,
        }}
        sx={{ position: 'absolute', '& .MuiPaper-root': { position: 'absolute' }, }}
      >
        <div style={{ padding: 20 }}>
          <h4>Drawer Inside Container</h4>
          <Button onClick={() => setOpen(false)}>Close</Button>
        </div>
      </Drawer>
    </Box>

I achieved it by using ref's. By default the drawer gets rendered with the root HTML element.

To render it within a container the Model prop would require a reference to the parent container and disable portal.

The parent container needs to be relative for the absolute positioning to work.