I've a reactJS with antDesign project, this is my header.js: "import {
    MenuOutlined,
    CloseOutlined,
    LoginOutlined,
    MailOutlined,
    WalletOutlined,
    MobileOutlined,
    UserAddOutlined,
    LockOutlined,
    UserOutlined,
} from '@ant-design/icons';
import { Button, Row, Col, Typography, Modal, Tabs, Form, Input, Checkbox } from 'antd';
import { useState } from 'react';

const Head = () => {
    const [collapsed, setCollapsed] = useState(true);

    const [size, setSize] = useState('large');

    const { Title } = Typography;
    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 (
        <>
            <Row style={{ display: 'flex', justifyContent: 'space-between', border: '0' }} align="middle">
                <Col style={{}}>
                    <Row style={{ flexWrap: "nowrap" }}>
                        <Button
                            type="text"
                            icon={collapsed ? <MenuOutlined /> : <CloseOutlined />}
                            onClick={() => setCollapsed(!collapsed)}
                            style={{
                                fontSize: '16px',
                                width: 64,
                                height: 64,
                                color: '#5E4AE3',
                                whiteSpace: 'nowrap'
                            }}
                        />
                        <Title style={{ whiteSpace: 'nowrap', color: '#DDDCDC', paddingTop: '12px' }} level={3}>CryptoTasky</Title>
                    </Row>
                </Col>
                <Col style={{ marginLeft: '10px', position: 'absolute', left: '0' }}>
                    <Button style={{ color: '#f5f5f5', boxShadow: '0 5px 20px rgba(94, 74, 227, .6)' }} type="primary" shape="round" icon={<LoginOutlined />} size={size} className="hidden-sm" onClick={showModal}>
                        تسجيل / تسجيل دخول
                    </Button>
                    <Button style={{ color: '#f5f5f5' }} type="primary" shape="round" icon={<LoginOutlined />} size={size} className="visible-sm" onClick={showModal}>
                    </Button>

                </Col>
            </Row>
            <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 Head;" I want to use onClick={showModal} on a different js file while still redirecting me to the same modal located here. what should i do to achieve that?