Cannot update a component (`TableComponent`) while rendering a different component (`EditComp`). How can i fix this?

I got an error. react-dom.development.js:86 Warning: Cannot update a component (TableComponent) while rendering a different component (EditComp). To locate the bad setState() call inside EditComp, follow the stack trace as described in https://reactjs.org/link/setstate-in-render at EditComp (http://localhost:3000/static/js/bundle.js:10830:5). How can i fix this?

My EditComp component

function EditComp({ id, idItem, Edit, editingText, submitEdits, setIdItem, handleEditing, item, style, classBull}) {
return (
    <>
        {
            id === idItem ?

                <Fragment>
                    <td className={classBull(id)}
                    ><input
                        className={style}
                        onChange={Edit}
                        value={editingText}
                        type="text" /></td>
                    <td> <button
                        onClick={() => submitEdits(item)}
                    >Edit</button></td>
                    <td> <img onClick={() => setIdItem(null)} src={cansel} alt="cancel" /></td>

                </Fragment>

                : <th onDoubleClick={() => handleEditing(id)}>{item.text}</th>
        }
    </>
   )
 }

My parent component

function TableComponent({ table, removeItem, setTable }) {

const [editingText, setEditingText] = useState("");
const [idItem, setIdItem] = useState(null);
const [style, setStyle] = useState('null');
const [currentItem, setCurrentItem] = useState(null);


const styleActive = () => {
    setStyle('table_data_active');

}
const classBull = (id) => {
    if (id === idItem) {
        return setStyle('table_data_active');;
    } else {
        return 'table_item'
    }
}

const handleEditing = (id) => {
    setIdItem(id);
}

 const Edit = (e) => {
    setEditingText(e.currentTarget.value);
}

const submitEdits = (item) => {
    axios.patch(`http://localhost:3004/item/${item.id}`, { text: editingText })
    setIdItem(null);
    setEditingText('')
}


   return (
        <thead>
        {
            table.map((item, id) => {
                return (
                    <tr
                        onDragStart={(e) => dragStartHandler(e, item)}
                        onDragLeave={(e) => dragEndHandler(e)}
                        onDragEnd={(e) => dragEndHandler(e)}
                        onDragOver={(e) => dragOVerHandler(e)}
                        onDrop={(e) => dragHandler(e, item)}
                        draggable={true}
                        key={item.id}>
                        <DataItem
                            styleActive={styleActive}
                            table={table}
                            style={style}
                            idItem={idItem}
                            handleEditing={handleEditing}
                            item={item} id={id} />
                        <EditComp
                            classBull={classBull}
                            style={style}
                            item={item}
                            handleEditing={handleEditing}
                            setIdItem={setIdItem}
                            submitEdits={submitEdits}
                            editingText={editingText}
                            Edit={Edit}
                            id={id}
                            idItem={idItem} />

                        <RemoveItem
                            id={id}
                            items={item}
                            removeItem={removeItem} />
                    </tr>

                )
            })
        }
    </thead>
)

}