How to make a material ui grid container work in resizable component

I use react-rnd and material ui libraries

<Rnd
      style={style}
      minWidth={700}
      minHeight={700}
      size={{ width: props.size.width, height: props.size.height }}
      position={{ x: props.size.x, y: props.size.y }}
      onDragStop={props.onDragStop}
      onResizeStop={props.onResizeStop}
    >
      <Paper
        id="scrollable-paper"
        style={{
          width: "auto",
          height: "100%",
          overflow: "auto",
        }}
      >
        {props.children}
      </Paper>
    </Rnd>

Child component

 <Grid container spacing={1} style={{ width: "inherit" }}>
        <Grid item xs={12}>
          
        </Grid>
        <Grid item xs={12} sm={12} md={4}>
          
        </Grid>
        <Grid item xs={12} sm={12} md={8}>
          
        </Grid>
      </Grid>

When I resize the component, the grid doesn't work. How can I fix this?