Превышена максимальная глубина обновления. Это может произойти, когда компонент неоднократно вызывает и исходит из react-xarrows

Я пытаюсь сделать проект реакции блок-схемы с нуля, поэтому для части стрелок я добавил библиотеку react-xarrows, изначально она работала, а теперь выдает мне эту ошибку

 Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    at checkForNestedUpdates (react-dom.development.js:27292:1)
    at scheduleUpdateOnFiber (react-dom.development.js:25475:1)
    at dispatchSetState (react-dom.development.js:17527:1)
    at index.js:754:1
    at commitHookEffectListMount (react-dom.development.js:23150:1)
    at commitLayoutEffectOnFiber (react-dom.development.js:23268:1)
    at commitLayoutMountEffects_complete (react-dom.development.js:24688:1)
    at commitLayoutEffects_begin (react-dom.development.js:24674:1)
    at commitLayoutEffects (react-dom.development.js:24612:1)
    at commitRootImpl (react-dom.development.js:26823:1)
import React, { useState } from "react";
import Draggable from "react-draggable";
import Xarrow ,{ Xwrapper,useXarrow } from "react-xarrows";
import { Card, Col, Row } from "reactstrap";
import ContextMenu from "./ContextMenu";
import BobUp from './BopUp'
import Base from "../Components/Base";
import { getTokenList, isLoggedIn } from "../Auth/Auth1";

const BaseDragDrop2 = () => {
  const tk= getTokenList();
const [contextVisible,setContextVisible]=useState(false)
const [selectedDiv, setselectedDiv] = useState({
        start: '',
        end: ''
    })
    
    const [conPoint, setConPoint] = useState({
        top: null,
        left: null,
        subLeft:null,
        subTop:null
    })
    const [con, setCon] = useState({
        connections:[]
    })
   
    const [initial, setInitial] = useState({
        task: [
            { name: 'N', color: 'yellow', category: 'compA', x: '', y: '',id:'1'},
            { name: 'A', color: 'green', category: 'compA', x: '', y: '',id:'2'},
            { name: 'V', color: 'black', category: 'compA', x: '', y: '',id:'3'},
            { name: 'R', color: 'red', category: 'compA', x: '', y: '',id:'4'}
        ]
    })
const onDragStart = (e, item, index) => {
  
        e.dataTransfer.setData('item', JSON.stringify(item))
        e.dataTransfer.setData('index', index)
}
const onDragOver = (e) => {
    e.preventDefault()
}
const [visible, setVisible] = useState(false)

const onDrop = (e, cat) => {
    e.preventDefault()
    const item = JSON.parse(e.dataTransfer.getData('item'))
    const index = e.dataTransfer.getData('index')
    var updatedTask;
    if (item.category === cat && index != null) {
      updatedTask = tasks.compB.filter((t, index2) => {
            if (index == index2) {
                t.x = e.clientX
                t.y = e.clientY
            }
            return t
        })
        setInitial({ ...initial, updatedTask })
    } else {
        item.x = e.clientX
        item.y = e.clientY
        item.category = cat
        item.id=item.id*Math.random()
        updatedTask = [...initial.task, item]
        setInitial({ ...initial, task: updatedTask })
    }}


let tasks = {
        compA: [],
        compB: []
    }
// Double click handler
const doubleClickHandler=(e)=>{
    if (selectedDiv.start.length!==0 && selectedDiv.start!==e.target.id){
        setselectedDiv({...selectedDiv,end:e.target.id})
        e.target.classList.add('active1')
        setConPoint({...conPoint,left:e.pageX,top:e.pageY,subLeft:235,subTop:9})
        if (selectedDiv.start!==0 && selectedDiv.end!==0){
            setVisible(true)
            setContextVisible(false)
        }else{
            setVisible(false)
        }
          
    }else{
        setselectedDiv({...selectedDiv,start:e.target.id})
        e.target.classList.add('active1')
       
    }
}

const clickHandler=(e)=>{
    console.info("id is ",e.target.id)
    console.info(Date.now())
    if (selectedDiv.start!==0 && selectedDiv.end!==0){
//    console.info('inside click handlker')
    if (selectedDiv.start===e.target.id){
        setselectedDiv({...selectedDiv,start:''})
        setVisible(false)
    }else if (selectedDiv.end===e.target.id){
        setselectedDiv({...selectedDiv,end:''})
        setVisible(false)
    }
}
}

const close = (e, item) => {
        const newConnection = con.connections
        const index = newConnection.findIndex((items) => items === item)
        console.info('items ',item)
//        console.info(index ," index of connection")
        newConnection.splice(index, 1)
        setCon({...con,connections:newConnection})
        document.getElementById(item.start).classList.remove('active1')
        document.getElementById(item.end).classList.remove('active1')
    }

const contextMenu=(e,t,index)=>{
        e.preventDefault()
        localStorage.setItem('t',JSON.stringify({t,index}))
        
        setVisible(false)
        setConPoint({...conPoint,left:null,top:e.null,subLeft:null,subTop:null})
        setConPoint({...conPoint,left:e.pageX,top:e.pageY,subLeft:232,subTop:9})
        setContextVisible(true)
     }
     
 
const contextHandler=(e)=>{
       const value=e.target.id
 let t5=null;
  
 
   const t2= JSON.parse(localStorage.getItem('t'))
   const id=     t2.t.id
   console.info(id," id ")
 const con2=con.connections

   const newTask = initial.task
   if (value==='delete'){
    con2.forEach((t)=>{
        console.info(t.start," start "," end ",t.end)
        console.info("id ",id)
        if (t.start===`${id}div` | t.end===`${id}div`){
            t5=t
            console.info(t5," if inside del")
        }
    })
    console.info(t5," t5")
    if (t5!==null){
    let index=con2.findIndex((t)=>t===t5)
    con2.splice(index,1)
    const upConnnect=[...con.connections,con2]
    setCon({...con,connections : con2})
    console.info(con2)
    }
    newTask.splice(t2.index+4,1)
    console.info("new task ",newTask)
    setInitial({...initial,task:newTask})
    setContextVisible(false)
     }else if (value==='duplicate')
     {
       const t3= t2.t
       t3.x=t3.x+100
       t3.id=t3.id* Math.random()
      const updatedTask = [...initial.task, t3]
       setInitial({ ...initial, task: updatedTask })
       setContextVisible(false)
       }
    }



    const selectHandler = (e) => {
      //  console.info(e)
      if (e.target.value === 'success') {
        const connect = {
            start:selectedDiv.start,
            end:selectedDiv.end
        }
        const upConnnect=[...con.connections,connect]
        setCon({...con,connections : upConnnect})
      //      console.info('selected div ',selectedDiv)
          const id=  document.getElementById(selectedDiv.start)
   //       console.info("document gte by id ",id)
            document.getElementById(selectedDiv.start).classList.remove('active1')
            document.getElementById(selectedDiv.end).classList.remove('active1')
            setselectedDiv({ ...selectedDiv, start:'', end:'' })
            setVisible(false)
  //          setConPoint({...conPoint,top:null,left:null,subLeft:null,subTop:null})

        } else if (e.target.value === 'error') {
            const connect = {
                start:selectedDiv.start,
                end:selectedDiv.end
            }
            const upConnnect=[...con.connections,connect]
            setCon({...con,connections : upConnnect})
            document.getElementById(selectedDiv.start).classList.remove('active1')
            document.getElementById(selectedDiv.end).classList.remove('active1')
            setselectedDiv({ ...selectedDiv, start: '', end:'' })
            setVisible(false)
    //        setConPoint({...conPoint,top:null,left:null,subLeft:null,subTop:null})

        } else if (e.target.value === 'close') {
            setselectedDiv({ ...selectedDiv, start: '', end: '' })
            document.getElementById(selectedDiv.start).classList.remove('active1')
            document.getElementById(selectedDiv.end).classList.remove('active1')
            setVisible(false)
    //        setConPoint({...conPoint,top:null,left:null,subLeft:null,subTop:null})

        }
    }

    initial.task.forEach((t) =>
        tasks[t.category].push(t)
    )
    const updatedArrow = useXarrow();

    return (
        <React.Fragment  >
          <Base>
                <Row >

                    <Col md = {3} >
                        <div>Component A
                            {tasks.compA.map((t, index) => {
                                return (
                                    <div key = {`${index}` || 1}
                                            draggable
                                            style = {{ backgroundColor: t.color }}
                                            onDragStart = {((e) => onDragStart(e, t))}
                                        ><label key = {index}></label></div>
                                   )
                            })}
                        </div>
                    </Col>
                    <Col md = {5}>
                       
                        <Card
                            className = "my-2"

                            onDrop = {((e) => onDrop(e, 'compB'))}
                           onDragOver = {((e) => onDragOver(e))}
                            style = {{
                                width: '45rem',
                                height: '30rem',
                                backgroundColor: '#F0F0F0'
                            }}>
                            <div>
                                Component B
                                {tasks.compB.map((t, index) => {
                                    return (
                                        <>
                                            <Draggable onDrag = {updatedArrow} onStop = {updatedArrow} >
                                                <div key = {`${index}` || 1}
                                                    id = {`${t.id}div`}
                                                    className='onhover'
                                                    onDoubleClick = {(e)=>doubleClickHandler(e)}
                                                    onClick = {(e)=>clickHandler(e)}
                                                    onContextMenu = {(e)=>contextMenu(e,t,index)}
                                                    style = {{
                                                        width: '5rem',
                                                        height: '5rem',
                                                        position: 'absolute',
                                                        outlineStyle: 'dotted',
                                                        outlineColor: t.color,
                                                        left: `${t.x - 338}px` || 0,
                                                        top: `${t.y - 45}px` || 0

                                                    }}

                                                >{t.name}</div>
                                            </Draggable>
                                            {visible && <ContextMenu points = {conPoint}>
                                                <ul style = {{ padding: 0,listStyleType:'none' }}>
                                                    <li>{selectedDiv.start.substring(0,8)}</li>
                                                    <li>
                                                        <select name = "select" id = "select"
                                                            onChange = {(e) => { selectHandler(e) }} >
                                                            <option key='' value='null'>Select an option</option>
                                                            <option key='success' value='success' >success</option>
                                                            <option key='error' value='error'>Error</option>
                                                            <option key='close' value='close' >close</option>
                                                        </select>
                                                    </li>
                                                    <li>{selectedDiv.end.substring(0,8)}</li>

                                            </ul></ContextMenu>}
                                            {contextVisible &&
                                        <ContextMenu points = {conPoint}>
                                            <ul style = {{ padding: 0,listStyleType:'none' }} onClick = {(e)=>{contextHandler(e)}}>
                                                <li id='duplicate' >Duplicate</li>
                                                <li id='delete'>Delete</li>
                                            </ul>
                                        </ContextMenu>}
                                                </>
                                                )
                                })}
                            </div>
                        </Card>
                    </Col>
                  

                </Row>
                {con.connections && con.connections.map((t, index) => {
                    return (<>
                       
                    <Xwrapper>    <Xarrow start = {t.start} end = {t.end} key = {index}
                    labels = {<i onClick = {(e) => close(e, t)} style = {{ cursor: "pointer" }} >x</i>}   />
                      </Xwrapper>
                      </>
                    )
                }
                     )}
                <button type = {'submit'} onClick = {() => { console.info(selectedDiv) }}  >submit</button>
                <button type = {'button'} onClick = {()=>{console.info(visible)}} >Visible</button>
                <button type = {'button'} onClick = {()=>{console.info(con.connections)}} >Connections</button>
                <button type = {'button'} onClick = {()=>{console.info(initial)}} >State</button>
                </Base>
        </React.Fragment >
    );
}
export default BaseDragDrop2

и дело в том, что код работает правильно в браузере Microsoft Edge, но не работает в Google

Таким образом, ответ на решение этой ошибки будет полезен, или предоставление другой библиотеки, которая подойдет по мере необходимости, будет отличной.