Javascript React对话框模式在用户单击预期按钮之前出现

我正在开发一个todo应用程序，预期流程是让用户输入他们的"Todo"并单击创建，将todo添加到Todo列表中，然后每个todo都会获得一个编辑按钮.该模式旨在在单击编辑按钮时出现，这将允许用户详细描述他们的待办事项.然而，目前当用户创建Todo时，Modal会弹出.

THE TODOLIST COMPONENT

import TodoItem from "./TodoItem"
import { useState } from "react"

export default function TodoList( {todos, setTodos} ) {
    const [editingItemId, setEditingItemId] = useState(null)

    function editTask(id) {
        setTodos(todos.map(todo => todo.id === id ? (
            {...todo, isEditing: !todo.isEditing}
        ) : todo
        ));
        setEditingItemId(id)
    }

    

    return (
        <div className="grid grid-cols-4 gap-4">
            {todos.map((todo, index) => (
                <TodoItem 
                key={index} 
                task={todo}
                editTask={editTask}
                editingItemId={editingItemId}
                />
            ))}
        </div>
    )
}

THE TODOITEM COMPONENT

import { useEffect } from "react";

export default function TodoItem({ task, editTask, editingItemId }) {
    useEffect(() => {
        if (task.isEditing && task.id === editingItemId) {
            displayDialog();
        }
    }, [task.isEditing, task.id, editingItemId]);

    function displayDialog() {
        document.querySelector('dialog').showModal();
    }

    return (
        <>
            <div className="col-span-4">
                <h2>{task.task}</h2>
                {task.description ? <p>{task.description}</p> : (
                    <button
                        onClick={() => editTask(task.id)}
                        className="bg-slate-600 hover:bg-slate-900 text-white font-bold px-2 py-1 m-1 rounded-2xl">
                        Describe your task
                    </button>
                )}
            </div>
            <dialog className="flex flex-col p-12 rounded-lg bg-slate-900 text-white">
                <h2 className="uppercase">{task.task}</h2>
                <textarea cols="60" rows="14" className="bg-slate-900 border border-white" />
            </dialog>
        </>
    );
}