i've a ReactJS, antDesign project. i've a modal.js file containing an antDesign modal: "import {
    LoginOutlined,
    MailOutlined,
    WalletOutlined,
    MobileOutlined,
    UserAddOutlined,
    LockOutlined,
    UserOutlined,
} from '@ant-design/icons';
import { Button, Modal, Tabs, Form, Input, Checkbox } from 'antd';
import { useState } from 'react';

const Mod = () => {
    const TabPane = Tabs.TabPane
    const [open, setOpen] = useState(false);
    const [confirmLoading, setConfirmLoading] = useState(false);
    const [modalText, setModalText] = useState('Content of the modal');
    const showModal = () => {
        setOpen(true);
    };
    const handleOk = () => {
        setModalText("");
        setConfirmLoading(true);
        setTimeout(() => {
            setOpen(false);
            setConfirmLoading(false);
        }, 2000);
    };
    const handleCancel = () => {
        console.log('Clicked cancel button');
        setOpen(false);
    };

    return (
        <Modal
            open={open}
            onOk={handleOk}
            confirmLoading={confirmLoading}
            onCancel={handleCancel}
            footer={[null]}
        >
            <Tabs style={{ backgroundColor: '#1e1e1e', color: '#F5F5F5' }} defaultActiveKey="1" centered >
                <TabPane
                    tab={
                        <span>
                            <LoginOutlined style={{ padding: '0 0 0 5' }} />
                            تسجيل دخول
                        </span>
                    }
                    key="1"
                >
                    <Form
                        name="normal_login"
                        className="login-form"
                        initialValues={{
                            remember: true,
                        }}
                        style={{ paddingTop: '60px;' }}
                    >
                        <Form.Item
                            name="إسم المُستخدم"
                            rules={[
                                {
                                    required: true,
                                    message: 'من فضلك أدخل إسم المُستخدم',
                                },
                            ]}
                        >
                            <Input size="large" prefix={<UserOutlined className="site-form-item-icon" />} placeholder="إسم المُستخدم" />
                        </Form.Item>
                        <Form.Item
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: 'من فضلك أدخل كلمة المرور',
                                },
                            ]}
                        >
                            <Input
                                size="large"
                                prefix={<LockOutlined className="site-form-item-icon" />}
                                type="password"
                                placeholder="كلمة المرور"
                            />
                        </Form.Item>
                        <Form.Item>
                            <Form.Item name="remember" valuePropName="checked" noStyle>
                                <Checkbox>تذكرني</Checkbox>
                            </Form.Item>

                            <a className="login-form-forgot" href="">
                                نسيت كلمة المرور؟
                            </a>
                        </Form.Item>

                        <Form.Item className="justify-end">
                            <Button style={{ width: '100%' }} size="large" shape="round" icon={<LoginOutlined />} type="primary" htmlType="submit" className="login-form-button">
                                تسجيل دخول
                            </Button>
                        </Form.Item>
                    </Form>
                </TabPane>
                <TabPane
                    tab={
                        <span>
                            <UserAddOutlined style={{ padding: '0 0 0 5' }} />
                            تسجيل حساب
                        </span>
                    }
                    key="2"
                >
                    <Form
                        name="normal_login"
                        className="login-form"
                        initialValues={{
                            remember: true,
                        }}
                    >
                        <Form.Item
                            name="إسم المُستخدم"
                            rules={[
                                {
                                    required: true,
                                    message: 'من فضلك أدخل إسم المُستخدم',
                                },
                            ]}
                        >
                            <Input size="large" prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
                        </Form.Item>
                        <Form.Item
                            name="البريد الإلكتروني"
                            rules={[
                                {
                                    required: true,
                                    message: 'من فضلك أدخل البريد الإلكتروني',
                                },
                            ]}
                        >
                            <Input size="large" prefix={<MailOutlined className="site-form-item-icon" />} placeholder="Example@email.com" />
                        </Form.Item>
                        <Form.Item
                            name="رقم الهاتف"
                            rules={[
                                {
                                    required: true,
                                    message: 'من فضلك أدخل رقم الهاتف',
                                },
                            ]}
                        >
                            <Input size="large" type="Email" prefix={<MobileOutlined className="site-form-item-icon" />} placeholder="+X XXX XXX XXXX" />
                        </Form.Item>
                        <Form.Item
                            name="رقم المحفظة TRX"
                            rules={[
                                {
                                    required: true,
                                    message: 'من فضلك أدخل رقم المحفظة',
                                },
                            ]}
                        >
                            <Input size="large" prefix={<WalletOutlined className="site-form-item-icon" />} placeholder="TBia4uHnb3oSSZm5isP284cA7Np1v15Vhi" />
                        </Form.Item>
                        <Form.Item
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: 'من فضلك أدخل كلمة المرور',
                                },
                            ]}
                        >
                            <Input
                                prefix={<LockOutlined className="site-form-item-icon" />}
                                type="password"
                                size="large"
                                placeholder="كلمة المرور"
                            />
                        </Form.Item>
                        <Form.Item>
                            <Form.Item name="remember" valuePropName="checked" noStyle>
                                <Checkbox>تذكرني</Checkbox>
                            </Form.Item>

                            <a className="login-form-forgot" href="">
                                نسيت كلمة المرور؟
                            </a>
                        </Form.Item>

                        <Form.Item>
                            <Button style={{ width: '100%' }} size="large" shape="round" icon={<UserAddOutlined />} type="primary" htmlType="submit" className="login-form-button">
                                تسجيل حساب
                            </Button>
                        </Form.Item>
                    </Form>
                </TabPane>
            </Tabs >
        </Modal>
    );
}

export default Mod;" How can i show that modal on other js files when i click on a button? onClick={showModal}?