ارسال event موقع استفاده از قالب

سلام من توی دیکت مبتدی هستم ، یک قالب HTML رو تبدیل به ریکت کردم میخوام مقادیر نام کاربری و پسورد روبخونم و هندل کنم ، چون قالب آماده ست یه ID زده که میفرسته به یک فایل JS ، چطور میتونم تابع handleSubmit که ساختم داخل اون فایل وارد کنم ؟

<form className="form" id="kt_login_signin_form">
                                    <div className="form-group mb-5">
                                        <input className="form-control h-auto form-control-solid py-4 px-8" value={userName} onChange={e=>setUserName(e.target.value)} type="text" placeholder="نام کاربری" name="username" autocomplete="off" />
                                    </div>
                                    <div className="form-group mb-5">
                                        <input className="form-control h-auto form-control-solid py-4 px-8" password={password} onChange={e=>setPassword(e.target.value)} type="password" placeholder="کلمه عبور" name="password" />
                                    </div>
                                    <div className="form-group d-flex flex-wrap justify-content-between align-items-center">
                                        <div className="checkbox-inline">
                                            <label className="checkbox m-0 text-muted">
                                                <input type="checkbox" name="remember" />
                                                <span></span>
                                                مرا به خاطر بسپار
                                            </label>
                                        </div>
                                        <a href="javascript:;" id="kt_login_forgot" className="text-muted text-hover-primary">کلمه عبور را فراموش کرده اید؟</a>
                                    </div>
                                    <button id="kt_login_signin_submit" className="btn btn-primary font-weight-bold px-9 py-4 my-3 mx-4">ورود</button>
                                </form>

این قالب توسط id="kt_login_signin_form فرم رو سابمیت میکنه
من همچین کدی رونوشتم که میخوام داخل فایل زیر قرار بدم

    const handleSubmite = async event => {
        event.preventDefault();
        const user = { userName, password } // exact in Server name
 
        try {
            const { status, data } = await loginUser(user)
            if (status === 200) {  //success Login
                toast.success("ورود با موفقیت انجام شد.", {
                    position: 'top-right',
                    closeOnClick: true,
                    rtl: true
                });
                console.log(data);
                reset();
            }
        }
        catch (ex) {
            console.log(ex);
            toast.error("مشکلی پیش آمده", {
                position: 'top-right',
                closeOnClick: true,
                rtl: true
            })
        }
    }

 $('#kt_login_signin_submit').on('click', function (e) {
            e.preventDefault();
 
            validation.validate().then(function(status) {
                if (status == 'Valid') {
 
                    //اینجا باید قرار بگیره
 
                    swal.fire({
                        text: "ارسال اطلاعات به سرور انجام شد",
                        icon: "success",
                        buttonsStyling: false,
                        confirmButtonText: "باشه فهمیدم!",
                        customClass: {
                            confirmButton: "btn font-weight-bold btn-light-primary"
                        }
                    }).then(function() {
                        KTUtil.scrollTop();
                    });