‎ Cannot update a component (`GraphView`) while rendering a different component (`ModalWeight`).To locate the bad setState() call inside `ModalWeight`

Question

My project is about studying graphs of data structures And I need to stretch a edge between 2 vertices and ask the user to put weight into the edge so i use modal and i want to open a modal from graphView component and close it on click the save button but i get error

the graph view copmponent

const GraphView = (saveGraph) => {
  const [graph, setGraph] = useState(new Graph([], []));

  const [data, setData] = useState('!ברוך הבא/ה לאתר לתירגול אלגוריתמי גרפים תהנה/י ובהצלחה');
  const [canAdd, setCanAdd] = useState(true);
  const [canRemove, setCanRemove] = useState(false);
  const [canDrawLine, setCanDrawLine] = useState(false);
  const [showModal, setShowModal] = useState(false);
  const [onVertexClick, setOnVertexClick] = useState(() => () => undefined);
  const [, forceUpdate] = useReducer(x => x + 1, 0)
  const startVertex = useRef(null);
  const endVertex = useRef(null);

  const drawLine = (sender) => {

    
    if (!startVertex.current) {
      startVertex.current = sender.current;
    }
    
    else {

      endVertex.current = sender.current;
      setShowModal(true);//opening the modal
    }
  }

  const addEdge = (weight) => {
    let key = graph.edges.length == 0 ? 0 : graph.getLastEdge().id + 1;
    let start = parseInt(startVertex.current['id']);
    let end = parseInt(endVertex.current['id']);
    graph.addEdge(new Edge(key, new Vertex(start - 1, start.toString()),
      new Vertex(end - 1, end.toString()), weight, true));

    setGraph(new Graph(graph.vertexes, graph.edges));
    endVertex.current.style.backgroundColor = '#ffcc66';
    startVertex.current.style.backgroundColor = '#ffcc66';
    startVertex.current = null;
  }

  return (
    <>
      {/* //כפתורים */}


      <Button text=' הוסף קודקוד' icon={<FaPlusCircle />} action={drawCircle} isDisabled={!canAdd} />
      <Button text='מתח קשת' icon={<FaArrowsAltV />} action={onDrawLineClick} isDisabled={!canDrawLine} />
      <Button text='מחק' icon={<FaTrash />} action={onDeleteClick} isDisabled={!canRemove} />

      <ModalWeight changeText = {(newVal) => setShowModal(newVal)} showModal={showModal} handleClose={addEdge} />//the modal

      </div>

    </>
  )
}

export default GraphView

the modal component

import React, { StrictMode, useState,useEffect } from 'react'


const ModalWeight = (changeText,showModal, handleClose) => {
 
    const [weight, setWeight] = useState(0);
    const showHideClassName = showModal ?"modal display-none":"modal display-block" ;

    const onClose = () => {
      handleClose(weight);
    changeText(false);
  }

    return (
        <>
        <StrictMode>
            <div className={showHideClassName}>
           
                    <section className="modal-main">
                        <p>הכנס משקל קשת (משקל 0 = אין משקל)</p>
                        <input type="number" onChange={event => setWeight(event.target.value)} ></input>
                        <button className='btnModal' type="button" onClick={onClose}>
                            Save
                        </button>
                    </section>
            </div></StrictMode>
        </>
    )
}

export default ModalWeight