Nextjs 14 Modal state ile açılmasını istediğim modal hedef gösterebilirim

Nextjs 14 Modal

<ModalGnrV1 openboolean={(isOpen==1)}title={'Form Başlık'}  closeOnClick={()=>{dispatch(changeOpenMode(0))}}
        footer={[{
            label:'Kaydet',
            onClick:()=>{alert('test')},
            class:'p-2 bg-green-800 hover:bg-green-700 rounded-sm  ml-4  text-white'
        },
        {
            label:'Güncelle',
            onClick:()=>{alert('test')},
            class:'p-2 bg-yellow-800 hover:bg-yellow-700 rounded-sm  ml-4  text-white'
        }
        ]}
        >
            <div className='text-stone-800'>asd</div>
        </ModalGnrV1>

        <ModalGnrV1 openboolean={(isOpen==2)} closeOnClick={()=>{dispatch(changeOpenMode(3))}}>
            <div className='text-stone-800'>modal2</div>
        </ModalGnrV1>


/////////////////////////////////////////////////////

components/modalGnrV1.tsx

import React, {ReactNode } from 'react'



export interface m{
    openboolean:boolean;
    closeOnClick:Function;
    title?:any;
    children:ReactNode;
    footer?:any;
    closeText?:string;
} 

export default function ModalGnrV1({openboolean,title,closeOnClick,children,closeText,footer}:m) {

    if(openboolean)
        {
        
    return (
        <div className="modal z-50 fixed w-full h-full top-0 left-0 flex items-center justify-center p-8 ">
            <div className="modal-overlay fixed w-full h-full bg-gray-900 opacity-50"></div>
            <div className="bg-white w-full lg:h-max  mx-auto rounded-lg shadow-xl z-50 overflow-y-auto">

{/* Header */}
            <div className="flex justify-between text-black items-center head bg-gray-100 py-1 px-8 text-lg font-medium">
{title ||  ' .'}
            <button className="p-2 bg-gray-200 hover:bg-gray-300 rounded-full ml-4" onClick={()=>{closeOnClick()}}>
            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
            </button>
            </div>
{/* Content */}
                <div className="content p-8">
                    {children}
                </div>
                {/* Footer */}
                <div className="flex justify-end items-end head bg-gray-100 py-1 px-8 text-sm font-medium">
                {footer.map((button:any, index:any) => (
                <button key={index} onClick={button.onClick} className={button.class}>
                    {button.label}
                </button>
                ))}
                    <button className="p-2 bg-red-500 hover:bg-red-400 rounded-sm  ml-4  text-white" onClick={()=>{closeOnClick()}} >
                        {closeText || 'Kapat'}
                    </button>
                </div>
            </div>
        </div>
        );
    }
}