(Editor.js) Editor is rendering twice for one holder id. (react js)

I’m creating a web app that requires text-editor. I’m relatiely new to react and coding. And I’m using Editor.js. I need multiple editors on one page. So, here’s what I did:

const PRIORTY_TYPES = [
    { id: 0, name: "p1", type: 1 },
    { id: 1, name: "p2", type: 2 },
    { id: 2, name: "p3", type: 3 },
    { id: 3, name: "other", type: 4 },
];

I created an array of priority types and I’m mapping it to create multiple editors.

To change the id of the container div for editor i’m using somthing like this.

const PriorityBlock = ({ priorityType }) => {
    const editorRef = useRef(null);

    const initEditor = () => {
        const editor = new EditorJS({
            holder: `${EDITOR_HOLDER_ID}-${priorityType}`,
            onReady: () => {
                editorRef.current = editor;
                new Undo({ editor });
            },
            autofocus: false,
            minHeight: 16,
            data: DEFAULT_INITIAL_DATA,
            onChange: async () => {
                let content = await editor.saver.save();
                console.log(content);
            },
            tools: {
                checklist: {
                    class: Checklist,
                    inlineToolbar: true,
                    tunes: ["anyTuneName"],
                },
                list: {
                    class: List,
                    inlineToolbar: true,
                    config: {
                        defaultStyle: "unordered",
                    },
                    tunes: ["anyTuneName"],
                },
                anyTuneName: {
                    class: AlignmentTuneTool,
                    config: {
                        default: "left",
                    },
                },
            },
        });
    };

    useEffect(() => {
        if (!editorRef.current) {
            initEditor();
        }

        return () => {
            editorRef.current?.destroy();
            editorRef.current = null;
        };
    }, []);

    return (
        <div
            id={`${EDITOR_HOLDER_ID}-${priorityType}`}
            className={`${styles.editorjs} primaryFont`}
        />
    );
};

When I run the code for the first time. It runs smoothly. But after a refresh there are 2 instances of same editors. i.e one holder id div has 2 editors.

Only solution I found is removing the strict mode in react. But I might need that for other purposes since it’s there for a reason. Can anybody tell me what’s causing this problem?