Black Lives Matter. Please consider donating to Black Girls Code today.

React: multiple plots created on re-render

I have this React component (Dashboard) which renders multiple plots as child components. Whenever I update the state of the dashboard, multiple instances of the plots are created, which are stacked on top of each other.

Here is a simplified example:

state = {
 goal : ''
}
 _refresh = () => {
    this.setState({
      goal: '5'
    })
  }

render() {
    return (
      <div>
        <div className='card'>
          <div className='heading'>
            <p style={{display: 'inline-block'}}>CURRENT WEIGHT</p>
            {this.state.goal}
            <button onClick={this._refresh}>hallo</button>
          </div>
          <CurrentPlot currentWeight={this.props.currentWeight} />
        </div>
        <div className='card'>
          <div className='heading'>
            <p>YOUR STATS</p>
          </div>
          <StatsPlot
            xData={this.props.xData}
            yData={this.props.yData}
          />
        </div>
      </div>
    )
  }

Any advice on how to fix this would be greatly appreciated!