I need to change state of my Modal component, whith static function.
I need a similar component, for example, in the ant.design library

Modal.confirm({});

but I want to implement my functionality without using antd.

const App = () => {
return (
 <div className="app">
    <button 
       onClick={() => {
          Modal.show({
             title: 'Hello', 
             onOk: (ids) => console.log('ok', ids), 
             onCancel:() => console.log('cancel')
          }); // Shows modal with some content
     }}>
     Show Modal
   </button>
 </div>
)
}

How can i do this?

interface ModalProps {
    title?: string
    okButtonText?: string
    onOk?: (data?: any) => void
    onCancel?: () => void

}

const Modal: React.FC & { show: (props: ModalProps) => void } = (props) => {
    const [visible, setVisible] = React.useState(false);
    
     const handleOk = () => {
       if(props.onOk){props.onOk([1,2,3]);}
     }

    return (
           <div className={visible ? 'modal-open' : ''}>
              <p>Some text...</p>
              <Button onClick={handleOk}>Save</Button>
            </div>
     );
}

Modal.show = ({ okButtonText = 'Save', title, onCancel, onOk }: ModalProps) => {
    const showModal = () => {
        // How to change state of modal?
    }
    return showModal();
}