React + d3力图不会更新最后添加的节点的位置

import React, { Component } from 'react';
import * as d3 from 'd3';

class ForceLayout extends Component {
  constructor(props) {
    super(props);
    this.svgRef = React.createRef();
    this.simulation = null;
    this.state = {
      nodes: [],
      links: [],
    };
  }

  componentDidMount() {
    this.simulation = d3.forceSimulation()
      .force('link', d3.forceLink().id((d) => d.id))
      .force('charge', d3.forceManyBody())
      .force('center', d3.forceCenter(500, 500));

    this.updateForceLayout();
  }

  componentDidUpdate() {
    this.updateForceLayout();
  }

  updateForceLayout() {
    const { nodes, links } = this.state;

    const svg = d3.select(this.svgRef.current);

    const link = svg.selectAll('.link')
      .data(links)
      .join('line')
      .attr('class', 'link');

    const node = svg.selectAll('.node')
      .data(nodes, (d) => d.id)
      .join('circle')
      .attr('class', 'node')
      .attr('r', 5)
      .call(drag(this.simulation));

    this.simulation.nodes(nodes).on('tick', () => {
      link
        .attr('x1', (d) => d.source.x)
        .attr('y1', (d) => d.source.y)
        .attr('x2', (d) => d.target.x)
        .attr('y2', (d) => d.target.y);

      node
        .attr('cx', (d) => d.x)
        .attr('cy', (d) => d.y);
    });

    this.simulation.force('link').links(links);
    this.simulation.alpha(1).restart();
  }

  render() {
    return <svg ref={this.svgRef} width={1000} height={1000}></svg>;
  }
}

function drag(simulation) {
  function dragstarted(event, d) {
    if (!event.active) simulation.alphaTarget(0.3).restart();
    d.fx = d.x;
    d.fy = d.y;
  }

  function dragged(event, d) {
    d.fx = event.x;
    d.fy = event.y;
  }

  function dragended(event, d) {
    if (!event.active) simulation.alphaTarget(0);
    d.fx = null;
    d.fy = null;
  }

  return d3.drag()
    .on('start', dragstarted)
    .on('drag', dragged)
    .on('end', dragended);
}

export default ForceLayout;