React + d3v4: Trouble updating node positions of Beeswarm Chart

I have managed to create a Beeswarm plot with d3 but I am having difficulties updating the plot with new data selected through a dropdown.

I'm using React to draw all the nodes, d3 calculates the x and y.

I have managed to calculate the positions of all the nodes. If i remove out the componentDidUpdate portion, on initial render, the beeswarm plot for the default selection of the dropdown gets rendered. However, each time i change a selection in the dropdown, although the node positions (which i print in console) shift accordingly, the new node positions do not get rendered.

Hence, I believe my problem lies with the React not updating the state. My react app crashes if i include the componentDidUpdate portion.

Beeswarm Component

class BeeswarmPlot extends Component {

  createNodes = (data) => {
        ...
  }

  render() {
    // Receives data from another component and creates nodes for each record
    var nodes = this.createNodes(this.props.data) 
    return (
      <svg>
          <ForceGraph
            nodes={nodes}
          />
      </svg>
    )
  }

}

export default BeeswarmPlot;

Force layout component

class ForceGraph extends Component {

  constructor() {
    super()
    this.state = {nodes: []}
  }

  componentDidMount() {
    this.updateNodePositions(this.props.nodes)
  }

  componentDidUpdate(prevProps, prevState) {

    if(prevState.nodes !== this.state.nodes) {
      const newNodes = prevState.nodes.slice()
      this.updateNodePositions(newNodes)
    }
  }

  // This function updates the node positions to prevent overlap and ensure clustering around a 'nucleus'
  updateNodePositions = (nodes) => {
      this.force = d3.forceSimulation(nodes)
                    .force("x", d3.forceX(d => d.cx))
                    .force("y", d3.forceY(d => d.cy))
                    .force("collide", d3.forceCollide(3))

      this.force.on('tick', () => this.setState({nodes}))
  }

  render() {
    //console.log(this.state.nodes)
    return (
      <Dots
        data={this.state.nodes}
      />
    )
  }

}

export default ForceGraph;