Page anchoring is not working properly for the first error TextValidator field used from react-material-ui-form-validator only in firefox browser

Question

I am working on a React project and I am using TextValidators for the input fields. When I submit the form the anchoring is not going to the first error input field(TextValidator) properly in Firefox browser(means the error field is not displaying fully). It is working fine in Chrome and Safari browsers. I am using document.getElementById(validationErrors[index].props.id).focus(); for the focus in the first error input field. Is there any reason behind this?

code:

import React from 'react';
import { Button, Typography } from '@material-ui/core';
import { TextValidator, ValidatorForm } from 'react-material-ui-form-validator';

const Textfields = () => {

const [value, setValue] = React.useState({
    name: '',
    email: '',
    phone: '',
    address: ''
});

const handleSubmit = (e) => {
    e.preventDefault();

};

ValidatorForm.addValidationRule('required', (value) => {
    if (value) {

        return true;

    }

    else if (value === null) {
        return true;
    }
    else {
        return false;
    }

});

const handleErrors = (errors) => {

    let validationErrors = errors;
    console.log(validationErrors)
    for (let index = 0; index < validationErrors.length; index++) {
        if (validationErrors[index].state.isValid === false) {
            if ((validationErrors[index].props.id) === "name") {
                document.getElementById(validationErrors[index].props.id).focus();
                return;
            }
        }


        if (validationErrors[index].state.isValid === false) {
            if ((validationErrors[index].props.id) === "email") {
                document.getElementById(validationErrors[index].props.id).focus({ preventScroll: false });
                return;
            }
        }


        if (validationErrors[index].state.isValid === false) {
            if ((validationErrors[index].props.id) === "phone") {

                document.getElementById(validationErrors[index].props.id).focus({ preventScroll: false });
                return;
            }
        }


        if (validationErrors[index].state.isValid === false) {
            if ((validationErrors[index].props.id) === "address") {
                document.getElementById(validationErrors[index].props.id).focus({ preventScroll: false });
                return;
            }
        }
    }


};

return (
    <div>
        <Typography variant="h5">Validations</Typography>
        <div>
            <ValidatorForm
                // ref="form"
                onSubmit={handleSubmit}
                onError={handleErrors}
            >
                <div style={{ marginTop: '400px' }}>
                    <TextValidator
                    key={1}
                        label="Name"
                        value={value.name}
                        onChange={(e) => setValue({ ...value, name: e.target.value })}
                        // name="name"
                        validators={["required"]}
                        errorMessages={['This field is required.']}
                        id="name"
                    />
                </div>

                <div style={{ marginTop: '400px' }}>
                    <TextValidator
                        label="Email"
                        onChange={(e) => setValue({ ...value, email: e.target.value })}
                        name="email"
                        id="email"
                        value={value.email}
                        validators={["required"]}
                        errorMessages={['This field is required.']}
                    />
                </div>

                <div style={{ marginTop: '400px' }}>
                    <TextValidator
                        label="Phone"
                        onChange={(e) => setValue({ ...value, phone: e.target.value })}
                        name="phone"
                        id="phone"
                        value={value.phone}
                        validators={["required"]}
                        errorMessages={['This field is required.']}
                    />
                </div>

                <div style={{ marginTop: '400px' }}>
                    <TextValidator
                        label="address"
                        onChange={(e) => setValue({ ...value, address: e.target.value })}
                        name="address"
                        id="address"
                        value={value.address}
                        validators={["required"]}
                        errorMessages={['This field is required.']}
                    />
                </div>
                <div>
                    <Button type="submit" style={{ marginTop: '20px', marginBottom: '20px' }}>Submit</Button>
                </div>
            </ValidatorForm>
        </div >
    </div>
)
 }

 export default Textfields

Sandbox link: https://codesandbox.io/s/basiccard-material-demo-forked-rswoi?file=/demo.js