Image Duplication

[ksuhr1]

My printable component is another Component that renders and image along with a table below. On my laptop, the image render's once fine but when I move my screen to a monitor screen, it renders the image on each page. I don't change the window size or do anything different. Does anyone else notice this? Monitor: Laptop:

class App extends Component {
  this.ref = React.createRef();

  return (
    <Aux>
      <ResetModal show={this.state.resetModal} modalClosed={this.resetGuitarCancelHandler}
        resetGuitar={this.resetGuitarBuilder}
        cancelReset={this.resetGuitarCancelHandler}
      />
                    
      <Modal show={this.state.purchasing} modalClosed={this.purchaseCancelHandler}>
        <ReactToPrint
          content={() => this.ref.current}
        >
          <PrintContextConsumer>
            {({handlePrint}) => (
              <button onClick={handlePrint}>Print this out!</button>
            )}
          </PrintContextConsumer>
        </ReactToPrint>
        <OrderSummaryToPrint 
          ref={this.ref}
          classicSBodyOptions={newState} 
          model={this.props.title}
          guitarBody={this.state.guitarBody}
          contrastLayerBody={this.state.contrastLayerBody}
          contrastLayerTop={this.state.contrastLayerTop}
          purchaseCanceled={this.purchaseCancelHandler}
          purchaseContinued={this.purchaseContinueHandler}
          printGuitarSummary={this.printGuitarSummaryHandler}
          isReversed={this.state.isReversed}
          isLeftHanded={this.state.isLeftHanded}
          isVertical={this.state.isVertical}
          is21Frets={this.state.is21Frets}
          is24Frets={this.state.is24Frets}
          totalPrice = {this.state.totalPrice}
         />
  );
}

const OrderSummaryToPrint = forwardRef((props, ref) => {
  return(
    <div className={classes.OrderSummaryContent} ref={ref}>
      <h1 className={classes.ProductTitle}>{props.guitarBody} </h1>
      <ClassicSToPrint/>
      <p style={{textAlign:'center', fontSize:'17px', marginTop:'400px', fontSize:'24px'}}>
        <strong>Total Price: ${props.totalPrice}</strong>
      </p>
      <p style={{fontWeight:'700', marginLeft:'100px'}}>BODY</p>
      <table className={classes.SummaryTable}>
        <tbody>
          {bodySummary}
        </tbody>
      </table>
      <p style={{fontWeight:'700', marginLeft:'100px'}}>NECK</p>
      <table className={classes.SummaryTable}>
        <tbody>
          {neckSummary}
        </tbody>
      </table>
      <p style={{fontWeight:'700', marginLeft:'100px'}}>ELECTRONICS</p>
      <table className={classes.SummaryTable}>
        <tbody>
          {electronicSummary}
        </tbody>
      </table>
    </div>
  );
}

[MatthewHerbst]

Hello. Would it be possible for you to make a Codesandbox or similar where I can see the running code? I can't reproduce the issue with just the above since it's missing a lot of logic and some definitions.

My guess is that there is a CSS issue, since react-to-print does not duplicate nodes, but happy to help get to the bottom of the issue.