React Pivot Table not rendering on change in state

Question

I am new to react js and I am trying to create a pivot table using React Pivot table. I want to be able to select a data set using a select drop down menu and update the state and re render the full table whenever there is a change in the drop down selection just like the jquery example shown here https://pivottable.js.org/examples/rcsvs.html

It works before I make any selections or changes to the Pivot Table. I am able to toggle between the 2 datasets and the state changes in the Pivot table. But when I select a pivot dimension and use the pivot table, after that point, changing the select menu does not help me change the pivot table's state. Please help.

I tried following solution what was given in this question, but i wasnt abl to implement the second step as i dont know how to define that in component call.

How do I re render the entire React Pivot Table UI component when I change the selection in select tag?

const PlotlyRenderers = createPlotlyRenderers(Plot);

class PivotTablePlotly extends React.Component {
  constructor(props) {
    super(props);
    this.state ={
      rowData: [],
    }
  }

componentWillReceiveProps(nextProps) {
    fetch(
      "API Call"
    )
      .then((result) => result.json())
      .then((rowData) => this.setState({ rowData }));
  }

  componentDidMount() {
    fetch(
      "API Call"
    )
      .then((result) => result.json())
      .then((rowData) => this.setState({ rowData }));
  }

  renderTable() {
    return (
      <PivotTableUI
        data={this.state.rowData}
        onChange={s => this.setState(s)}
        renderers={Object.assign({}, TableRenderers, PlotlyRenderers)}
        {...this.state}
      />
    )
  }
  render() {
    return (
        <div className="pivotTheme">
          <Col>
            <br />
            {this.renderTable()}
          </Col>
        </div>
    );
  }
}
export default PivotTablePlotly;