How to change the charge on mouseover for d3 force-directed graph

Question

I'm using d3 5.16.0 and angular 12.2.9.

I'm trying to repel all nodes from the node which is moused-over, but it's not working. When I step through the debugger, I can see that my charge function is getting called for each node and the charge is getting changed for the moused-over node, but nothing changes in the display. Could anyone help me see what I'm doing wrong? Thanks.

const that = this;
const $node = this.svg.select('.nodes')
    .selectAll('circle')
    .data(_nodes, d => d.id)
    .join('circle')
    .on('mouseover',function(node) {
      that.simulation
          .force('charge', d3.forceManyBody().strength((d: any) => {
            return d.id === node.id ? -500 : -200;
          }));
      that.simulation.restart();
    });

this.simulation = d3.forceSimulation(_nodes)
  .force('link', d3.forceLink(_links).id((d: any) => d.id))
  .force('charge', d3.forceManyBody().strength(-200));

this.simulation.force('link').links(_links);

const $lines = d3.select('.links').selectAll('line');
const $circles = d3.select('.nodes').selectAll('circle');

let ticked = (): void => {
  $lines.transition().duration(100)
    .attr('x1', (d: any) => d.source.x)
    .attr('y1', (d: any) => d.source.y)
    .attr('x2', (d: any) => d.target.x)
    .attr('y2', (d: any) => d.target.y);

  $circles.transition().duration(100)
    .attr('cx', (d: any) => d.x)
    .attr('cy', (d: any) => d.y);
}

this.simulation.nodes(_nodes).on('tick', ticked);