The following code extract renders a modal window with an image and some text in it:

<Grid style={{ scrollBehavior: "smooth", overflowY: "auto", maxHeight: "35em" }}
container justify="center" alignItems="center">
    <Grid
    item
    xs={12}
    sm={12}
    md={4}
    lg={4}
    xl={4}
    style={{ textAlign: "center", padding: "20px 0px" }}
    >
    {this.getPopupImage(this.state.teamMemberInfo.name)}
    <h3>{this.state.teamMemberInfo.name}</h3>
    <label>{this.state.teamMemberInfo.position}</label>
    </Grid>

    <Grid
    item
    xs={12}
    sm={12}
    md={8}
    lg={8}
    xl={8}
    style={{ padding: "20px" }}
    >

    <p style={{}}
        className={classes.descControl}
        dangerouslySetInnerHTML={{
        __html: this.state.teamMemberInfo.description
        }}>
    </p>
    </Grid>
</Grid>

However, the contents leave a burned-in ghost image when it is scrolled:

What could be causing this strange behavior?