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

Question

下面是代码。在这段代码中，当jodit编辑器的onChange执行它时，我遇到了问题，它改变了原始状态，甚至没有设置它。该行为在所有项目中都可以看到，除了 last 中的最后一个编辑器工作正常。依赖“jodit-react”：“^1.1.1”，“react”：“^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;