Focus first error, formik, reactjs, dom

FocusError

// add custom attribute on the input element or wrapper div data-valid={`${error ? "false" : "true"}}


import { useEffect } from 'react';
import { useFormikContext } from 'formik';

const FocusError = () => {
    const { errors, isSubmitting, isValidating } = useFormikContext();

    useEffect(() => {
        if (Object.keys(errors).length > 0 && isSubmitting && !isValidating) {
            const firstErrorElement = document.querySelector('[data-valid="false"]');
            if (firstErrorElement) {
                const position = firstErrorElement.getBoundingClientRect();
                // scrolls to 70px above element to eliminate navbar
                window.scrollTo({ left: position.left, top: position.top + window.scrollY - 70, behavior: 'smooth' });
            }
        }
    }, [errors, isSubmitting, isValidating]);

    return null;
};

export default FocusError;