react-d3-graph cannot move nodes inside a spesific project

Question

I modified this component in a seperate project. It was working just fine. Then i copied that segment into my main project. The graph is rendered with no problem however, when i try to change position of any node it does not work and creates these errors. enter image description here

The versions of d3 are the same in both of the projects. I thought it might be caused by some other component and i tried to render it in app.js on its own and it still did not work. I wonder what causes this and cannot find it.

import * as React from "react"; 
import { Graph } from "react-d3-graph"; 

const data = {   nodes: [
    { id: "NEWS1", color: "black", size: 800 },
    { id: "NEWS2", color: "black", size: 800 },
    { id: "NEWS3", color: "black", size: 800 },
    { id: "NEWS4", color: "black", size: 800 },
    { id: "Sharer1", color: "red", size: 300 },
    { id: "Sharer2", color: "green", size: 300 },
    { id: "Sharer3", color: "red", size: 300 },
    { id: "Sharer4", color: "red", size: 300 },
    { id: "Sharer11", color: "red", size: 300 },
    { id: "Sharer12", color: "red", size: 300 },
    { id: "Sharer13", color: "red", size: 300 },
    { id: "Sharer21", color: "red", size: 300 },
    { id: "Sharer22", color: "red", size: 300 },
    { id: "Sharer23", color: "red", size: 300 },
    { id: "Sharer31", color: "red", size: 300 },
    { id: "Sharer32", color: "red", size: 300 },
    { id: "Sharer33", color: "red", size: 300 },
    { id: "Sharer41", color: "red", size: 300 },
    { id: "Sharer411", color: "red", size: 300 },
    { id: "Sharer4111", color: "red", size: 300 }   ],   
links: [
    { source: "NEWS1", target: "Sharer1" },
    { source: "NEWS2", target: "Sharer2" },
    { source: "NEWS3", target: "Sharer3" },
    { source: "NEWS4", target: "Sharer4" },
    { source: "Sharer1", target: "Sharer11" },
    { source: "Sharer1", target: "Sharer12" },
    { source: "Sharer1", target: "Sharer13" },
    { source: "Sharer2", target: "Sharer21" },
    { source: "Sharer2", target: "Sharer22" },
    { source: "Sharer2", target: "Sharer23" },
    { source: "Sharer3", target: "Sharer31" },
    { source: "Sharer3", target: "Sharer32" },
    { source: "Sharer3", target: "Sharer33" },
    { source: "Sharer4", target: "Sharer41" },
    { source: "Sharer41", target: "Sharer411" },
    { source: "Sharer411", target: "Sharer4111" }   ] };

const myConfig = {   nodeHighlightBehavior: true,   node: {
    color: "lightgreen",
    size: 120,
    labelProperty: "id",
    highlightStrokeColor: "blue"   },   link: {
    type: "LINE_SMOOTH",
    highlightColor: "red"   } };

function NetworkGraph() {
    const [state,showModal] = React.useState(false)
    const handleShowMessageClick = (id) => showModal(true);
    const handleCloseModal = (id) => showModal(false);   const onClickGraph = () => {
    //  window.alert(`Clicked the graph background`);   };

  const onClickNode = (nodeId) => {
    //   };

  const onDoubleClickNode = (nodeId) => {
    // window.alert(`Double clicked node ${nodeId}`);   };

  const onRightClickNode = (event, nodeId) => {
    // window.alert(`Right clicked node ${nodeId}`);   };

  const onMouseOverNode = (nodeId) => {
    //handleShowMessageClick(nodeId);   };

  const onMouseOutNode = (nodeId) => {
    //handleCloseModal(nodeId);   };

  const onClickLink = (source, target) => {
    // window.alert(`Clicked link between ${source} and ${target}`);   };

  const onRightClickLink = (event, source, target) => {
    // window.alert(`Right clicked link between ${source} and ${target}`);   };

  const onMouseOverLink = (source, target) => {
    // window.alert(`Mouse over in link between ${source} and ${target}`);   };

  const onMouseOutLink = (source, target) => {
    // window.alert(`Mouse out link between ${source} and ${target}`);   };

  return (
    <div>
      <Graph
        id="graph-id" 
        data={data}
        config={myConfig}
        onClickNode={onClickNode}
        onRightClickNode={onRightClickNode}
        onClickGraph={onClickGraph}
        onClickLink={onClickLink}
        onRightClickLink={onRightClickLink}
        onMouseOverNode={onMouseOverNode}
        onMouseOutNode={onMouseOutNode}
        onMouseOverLink={onMouseOverLink}
        onMouseOutLink={onMouseOutLink}
      />
    </div> ); }

export default NetworkGraph