Expected behavior

So i have a form component that i used inside a modal(i have many forms but trying to use the same modal), should be normal to press tab or shift-tab to go forth or back through inputs of my form

Actual behavior

pressing tab or shift-tab does nothing and i stay in the same input, i have to mention thought that if i remove the conditional rendring of the form component i can go forth the tab works but not shift-tab for some reason, the form is fonctional on it's own when i put it outside the modal everything works fine, and adding tabindex does not do anthing*Resources (screenshots, code snippets etc.)*

this is the modal code :

<MDBModal show={modal} setShow={setModal} tabIndex='-1'>
            <MDBModalDialog scrollable centered size="lg">
                <MDBModalContent>
                    <MDBModalHeader className="mx-4 border-0">
                        {modalContent && <MDBModalTitle> <span className={'dot-'+cards[modalContent-1].color}></span> <span className="ms-3">{cards[modalContent-1].title}</span></MDBModalTitle>}
                    </MDBModalHeader>
                    <MDBModalBody className="mx-2 border-0">
                        {(modalContent === 1) && <UserDetailsForm handler={toggleModal} />}
                    </MDBModalBody>
                </MDBModalContent>
            </MDBModalDialog>
        </MDBModal>

and that's some of the form code( i removes some of the inputs to make it short and made sure the behavior is still the same)

const UserDetailsForm = (props) => {
return (
    <form >
        <MDBContainer>
            <MDBRow>
                <MDBCol lg='6'>
                    <div className="form-outline mb-4">
                        <MDBInput
                            label='First Name'
                            id='fname'
                            type='text'
                            size='lg'
                            className="py-3"
                        />
                    </div>
                </MDBCol>
                <MDBCol lg='6'>
                    <div className="form-outline mb-4">
                        <MDBInput
                            label='Last Name'
                            id='lname'
                            type='text'
                            size='lg'
                            className="py-3"
                        />
                    </div>
                </MDBCol>
            </MDBRow>
            <MDBRow>
                <MDBCol lg='12'>
                    <div className="form-outline mb-4">
                        <MDBInput
                            label='Birthdate'
                            id='birthdate'
                            type='date'
                            size='lg'
                            className="py-3"
                        />
                    </div>
                </MDBCol>
        </MDBContainer>
        <MDBContainer className="mb-3">
            <div className="d-flex justify-content-around">
                <MDBBtn color="warning" className="px-5 py-3" onClick={(e) => { e.preventDefault(); props.handler() }}>cancel</MDBBtn>
                <MDBBtn color="secondary" className="px-5 py-3" >Confirm</MDBBtn>
            </div>
        </MDBContainer>
    </form>

....