appending nodes gives: Cannot create property 'vx' on string

[dcsan]

Describe the bug
sometimes when dynamically adding nodes i will get this error:
Cannot create property 'vx' on string

this only happens when I thrash click quite fast to add nodes. it's almost as if there's an in-between render cycle that gets thrown off by the data getting appended to.

To Reproduce

Uncaught TypeError: Cannot create property 'vx' on string 'IwnBW4kq1zOJ5bMcZu0Gr2BiZ1l2'
    at force (react-force-graph-2d.js?v=6e347967:15457:19)
    at react-force-graph-2d.js?v=6e347967:15574:9
    at Map.forEach (<anonymous>)
    at Object.tick (react-force-graph-2d.js?v=6e347967:15573:14)
    at layoutTick (react-force-graph-2d.js?v=6e347967:19666:31)
    at Function.tickFrame (react-force-graph-2d.js?v=6e347967:19654:26)
    at comp.<computed> [as tickFrame] (react-force-graph-2d.js?v=6e347967:13151:65)
    at animate (react-force-graph-2d.js?v=6e347967:20604:51)

I am adding a node to the graph data and I assume the renderer is then injecting the x, y, vx, vy position calculations into that node. However I do not inject it as a string so I don't see where this comes from.
I just append to graphData.nodes the following struct:

  async function handleNodeClick(node: CollabNode) {
   ...
  const personExists = graphData?.nodes?.find(n => n.id === author?.userId)
    if (!personExists) {
      const newNode: CollabNode = {
        x: 0,
        y: 0,
        vx: 0, vy: 0,
        id: author?.userId,
        label: author.profileName,
        type: "person",
        val: 5,
        img: imagekitSize(author.imageURI!, 100),
      }
      console.log({ newNode })
      graphData?.nodes?.push(newNode)

where graphData is a setState value passed to the component.

Expected behavior
should be able to add to nodes

Screenshots

Desktop (please complete the following information):

• OS: mac os
• Browser chrome
• Version latest

Additional context
I'm inserting data reactively and using the component. I am NOT using JS code to reset the data

      <ForceGraph2D
        graphData={props.graphData}
        nodeAutoColorBy='group'
        nodeCanvasObject={(node: any, ctx: CanvasRenderingContext2D) => canvasNode({ node, ctx, hover: highlightNodes.has(node) })}
        linkCanvasObject={(node: any, ctx: CanvasRenderingContext2D) => canvasLink({ node, ctx })}
        onNodeHover={handleNodeHover}
        linkWidth={2}
        nodeRelSize={10}
        onNodeClick={props.handleNodeClick} // this appends the new node
        autoPauseRedraw={true}
        cooldownTicks={50}

      />