React component reusability :same code to wrap 2 different components

I have an header component that is used in 2 other components wrapping them everytime with the same code. Is there a logic that can be implemented to wrap them and use that code only one?

export default function SameCodeToWrapComponent1() {  
 . . .

 return (
<ThemeProvider theme={appTheme}>
  <div className={classes.root}>
    <CssBaseline />
    <AppBar >
      <Toolbar className={classes.toolbar}>
       ...
      </Toolbar>
    </AppBar>
    <main className={classes.content}>
      <div className={classes.appBarSpacer} />
      <Container maxWidth="lg" className={classes.container}>
        <Grid container spacing={3}>
          <Grid item xs={12}>
            <Paper className={classes.paper}>
              <MyComponent1 />
            </Paper>
          </Grid>
        </Grid>
      </Container>
    </main>
  </div>
</ThemeProvider>
  );
    }

And in another component I use

 export default function SameCodeToWrapComponent2() {   
  . . .
 return (
<ThemeProvider theme={appTheme}>
  <div className={classes.root}>
    <CssBaseline />
    <AppBar >
      <Toolbar className={classes.toolbar}>
        ...
         
      </Toolbar>
    </AppBar>
    <main className={classes.content}>
      <div className={classes.appBarSpacer} />
      <Container maxWidth="lg" className={classes.container}>
        <Grid container spacing={3}>
          <Grid item xs={12}>
            <Paper className={classes.paper}>
              <MyComponent2/>
            </Paper>
          </Grid>
        </Grid>
      </Container>
    </main>
  </div>
</ThemeProvider>
 );
  }

As you can see both call MyComponent1 and MyComponent2 at a certain point but are the same part of code in 2 different components

Answer

yes, you should make a Wrapper component & use its children prop to render content inside it. this is called component composition & there’s a famous article in react website about it here. your wrapper component would look like this:

 const Wrapper = ({ children }) => {
    return (
      <ThemeProvider theme={appTheme}>
        <div className={classes.root}>
          <CssBaseline />
          <AppBar>
            <Toolbar className={classes.toolbar}>...</Toolbar>
          </AppBar>
          <main className={classes.content}>
            <div className={classes.appBarSpacer} />
            <Container maxWidth="lg" className={classes.container}>
              <Grid container spacing={3}>
                <Grid item xs={12}>
                  <Paper className={classes.paper}>
                    {children}
                  </Paper>
                </Grid>
              </Grid>
            </Container>
          </main>
        </div>
      </ThemeProvider>
    );
  };

then you would use it like this:

  const AnyComponent = () => {
    return <Wrapper>Your non-reusable content goes here</Wrapper>
  }