列表中有多个 jodit 编辑器，但是当我更改编辑器特定索引状态的值时，它会重置除最后一项之外的值下面提供代码

如何解决列表中有多个 jodit 编辑器，但是当我更改编辑器特定索引状态的值时，它会重置除最后一项之外的值下面提供代码

下面是代码。在这段代码中，当 jodit 编辑器的 onChange 执行它时，我遇到了问题，它改变了原始状态，甚至没有设置它。 除了 last 中的最后一个编辑器工作正常之外，所有项目中都可以看到该行为。 依赖 "jodit-react": "^1.1.1","反应": "^17.0.2",

import React,{useState,useRef} from "react";
import JoditEditor from "jodit-react";
import "./index.css";

const config = {
    readonly: false,// all options from https://xdsoft.net/jodit/doc/
};

function App() {
    const editor = useRef(null);
    const [content,setContent] = useState("");
    const [arr,setArr] = useState([]);

    function add() {
        let arr1 = [...arr];
        let obj = {
            des: "",vali: false,ref: editor,};
        setArr([...arr1,obj]);
    }

    function onChangeVal(val,index,status) {
        let arr1 = [...arr];
        arr1[index]["des"] = val;
        arr1[index]["vali"] = status;
        setArr([...arr1]);
    }

    function del(index) {

        let arr1 = [...arr];
        arr1.splice(index,1);
        setArr([...arr1]);
    }

    function list() {
        console.log(arr,"arr1");
        let arr1 = [...arr];
        console.log(arr1);
        return arr1.map((i,k) => {
            return (
                <div>
                    <div>
                        <button onClick={() => del(k)}>Delete</button>
                    </div>
                    <JoditEditor
                        ref={i.ref}
                        value={i.des}
                        config={config}
                        tabIndex={k} // tabIndex of textarea
                        onChange={(newContent) => {
                            let val = newContent.replace("<p><br/></p>","");
                            onChangeVal(newContent,k,!val ? true : false);
                        }}
                    />
                    {i.vali === true && <div>please enter value</div>}
                </div>
            );
        });
    }

    return (
        <div className="App">
            <div>
                <button onClick={() => add()}>add</button>
            </div>

            {arr.length > 0 && list()}
        </div>
    );
}

export default App;