reactjs - Bootstrap modal .hide() function doesnt work (react, typescript) - Stack Overflow

I am trying to figure out how to close a modal after successfully submitting the form of the modal. When calling modalInstance.hide() I get the greyish background and cant click or scroll anything.

Edit: I fixed it. Somehow by calling modalInstance.hide() doesnt remove all the settings, therefore I had to remove them manually, I dont know why. I heard more people complained about this.

import React, { useContext } from "react";
import { useState } from "react";
import { LoginRequest } from "../interfaces/AuthInterface";
import { loginUser } from "../services/AuthService";
import AuthContext from "../context/AuthProvider";
import "./SignUpButton.css"
import { Modal } from "bootstrap";


export default function Login() {

//....

    const SubmitLogin = async () => {
    //...API call funtionality

            //Closing the modal after submitting data
            const modalElement = document.getElementById('LoginModal') as HTMLElement;
            if (modalElement) {
                const modalInstance = Modal.getInstance(modalElement) || new Modal(modalElement);
                modalInstance.hide();
                setTimeout(() => {
                    //somehow these three setting are not being removed by hide
                    document.body.style.overflow = '';
                    document.body.style.paddingRight = '';
                    document.querySelector('.modal-backdrop')?.remove();
                }, 500);  // Delay to allow animations to finish
            }
    }


    return (
        <div className="button-nav">
            <button type="button" className="btn btn-primary" data-bs-toggle="modal" data-bs-target="#LoginModal">
                Log In
            </button>
            <div className="modal fade" id="LoginModal" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div className="modal-dialog modal-dialog-centered">
                    <div className="modal-content">
                        <div className="modal-header">
                            <h1 className="modal-title fs-5" id="exampleModalLabel">Log In</h1>
                            <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div className="modal-body">
                            <div className="form-group">
                                <label >Username</label>
                                <input
                                    type="text" className="form-control" id="LoginInputUsername" placeholder="Enter your Username"
                                    name="username"
                                    onChange={handleChange}
                                    value={login.username}
                                />
                            </div>
                            <div className="form-group">
                                <label >Password</label>
                                <input type="password" className="form-control" id="LoginInputPassword1" placeholder="Enter your Password"
                                    name="password"
                                    value={login.password}
                                    onChange={handleChange}
                                />
                            </div>
                        </div>
                        <div className="modal-footer button-nav">
                            <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button onClick={SubmitLogin} id="submitButton" type="button" className="btn btn-primary">Sign Up</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    );
}