I wanted to combine the persistent drawer like the

Or by refactoring to rendered a styled main element directly:

Main.js

import { styled } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import Typography from "@mui/material/Typography";

const drawerWidth = 240;

// Style a "main" HTML element
const Main = styled("main", { shouldForwardProp: (prop) => prop !== "open" })(
  ({ theme, open }) => ({
    flexGrow: 1,
    padding: theme.spacing(3),
    transition: theme.transitions.create("margin", {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen
    }),
    marginLeft: 0,
    ...(open && {
      marginLeft: `${drawerWidth}px`,
      transition: theme.transitions.create("margin", {
        easing: theme.transitions.easing.easeOut,
        duration: theme.transitions.duration.enteringScreen
      }),
    })
  })
);

const MScreen = ({ open }) => {
  return (
    <Main open={open}> // <-- pass open prop through to Main component
      <CssBaseline />
      <Typography paragraph>
        ....
      </Typography>
      <Typography paragraph>
        ...
      </Typography>
    </Main>
  );
};

export default MScreen; // <-- export MScreen content component

You'll need to apply similar fix to Second component as well for it to render correctly. I'd recommend creating a layout route for the "main content" area that renders an Outlet for routes render their content into so you only need to handle the drawer styling in one routed component instead of all of them.