Radix UI modal getting called multiple times based on number of items. How should we call it only once

Question

import { useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { TaskData, setTaskList } from '@/store/tasks'
import { RootState } from '@/store/rootReducer'

// components
import Button from "@/components/ui/button"
import Modal from "@/components/ui/modal"
import TaskForm from "@/components/List/TaskForm"


export default function Dashboard() {
  const dispatch = useDispatch();

  const [modalCreateOpen, setModalCreateOpen] = useState(false)
  const [modalEditOpen, setModalEditOpen] = useState(false)
  const taskList = useSelector((state: RootState) => state.tasks.taskList)

  const closeModal = (): void => {
    setModalCreateOpen(!modalCreateOpen)
  }

  const deleteTask = (id: string): void => {
    const taskNewList = taskList.reduce((acc: TaskData[], task: TaskData) => {
      if (task.id !== id) {
        acc.push(task);
      }
      return acc;
    }, []);
    dispatch(
      setTaskList(taskNewList)
    )
  }

  const getTaskData = (id: string): TaskData | undefined => {
    console.log(taskList)
    console.log(id)
    const task: TaskData | undefined = taskList.find((task: TaskData) => { 
      if (task.id === id ) {
        return task
      }
    })
    return task
  }

  return (
    <>
      <div className="w-full flex">
        <div className="sidebar w-2/12">
          <Modal open={modalCreateOpen} onOpenChange={closeModal}>
            <Modal.Button className="rounded p-2 hover:bg-gray-200">
              <Button className="h-10 px-5 m-2 text-indigo-100 transition-colors duration-150 bg-indigo-700 rounded-lg focus:shadow-outline hover:bg-indigo-800">Add Task</Button>
            </Modal.Button>
            <Modal.Content title="Create Task">
              <TaskForm
                create={true}
                afterSave={closeModal} />
            </Modal.Content>
          </Modal>
        </div>
        <div className="shadow-md py-10 w-4/5">

          <div className="relative flex min-h-screen flex-col justify-center w-1/2 md:w-full">
            <div className="relative bg-white px-6 pt-10 pb-8 shadow-xl sm:mx-auto sm:max-w-lg md:w-full sm:rounded-lg sm:px-10">
              <div className="mx-auto max-w-md">
                <div className="divide-y">
                  <div className="space-y-6 py-8 text-base leading-7 text-gray-600 w-full">
                    <p>List of Outstanding tasks</p>

                    <div className="space-y-4">
                      <ul className="space-y-4">
                        {!taskList.length && <li>No task yet! Create a task?</li>}
                        {taskList?.map((task: TaskData) => (
                          <li key={task.id} id={task.id} className="flex items-center">

                            {task.isCompleted ? <svg className="h-6 w-6 flex-none fill-sky-100 stroke-sky-500 stroke-2" stroke-linecap="round" stroke-linejoin="round">
                              <circle cx="12" cy="12" r="11" />
                              <path d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9" fill="none" />
                            </svg> : ''}
                            <div className="grow ml-4">
                              <div>{task.taskName}</div>
                              <div>{task.taskDescription}</div>
                            </div>

                            <div className="flex-none">
                              <button id="delete" onClick={() => deleteTask(task.id)}>
                                <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.5 1C5.22386 1 5 1.22386 5 1.5C5 1.77614 5.22386 2 5.5 2H9.5C9.77614 2 10 1.77614 10 1.5C10 1.22386 9.77614 1 9.5 1H5.5ZM3 3.5C3 3.22386 3.22386 3 3.5 3H5H10H11.5C11.7761 3 12 3.22386 12 3.5C12 3.77614 11.7761 4 11.5 4H11V12C11 12.5523 10.5523 13 10 13H5C4.44772 13 4 12.5523 4 12V4L3.5 4C3.22386 4 3 3.77614 3 3.5ZM5 4H10V12H5V4Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
                              </button>
                            </div>
                            <div className="flex-none">

                              <Modal open={modalEditOpen} onOpenChange={setModalEditOpen} key={task.id}>
                                <Modal.Button className="rounded p-2 hover:bg-gray-200">
                                  <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.8536 1.14645C11.6583 0.951184 11.3417 0.951184 11.1465 1.14645L3.71455 8.57836C3.62459 8.66832 3.55263 8.77461 3.50251 8.89155L2.04044 12.303C1.9599 12.491 2.00189 12.709 2.14646 12.8536C2.29103 12.9981 2.50905 13.0401 2.69697 12.9596L6.10847 11.4975C6.2254 11.4474 6.3317 11.3754 6.42166 11.2855L13.8536 3.85355C14.0488 3.65829 14.0488 3.34171 13.8536 3.14645L11.8536 1.14645ZM4.42166 9.28547L11.5 2.20711L12.7929 3.5L5.71455 10.5784L4.21924 11.2192L3.78081 10.7808L4.42166 9.28547Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
                                </Modal.Button>

                                <Modal.Content title="Edit Task">
                                  {task.id}
                                  <TaskForm key={task.id} taskD={getTaskData(task.id)} afterSave={() => setModalEditOpen(false)} create={false} />
                                </Modal.Content>
                              </Modal>

                            </div>
                          </li>
                        ))}
                      </ul>

                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>

  )
}

My Modal is inside

items as seen based on the number of items

Please help tried everything