Formik Scroll To First Invalid Element W/O Refs

ErrorFocus.jsx

import React from 'react';
import { connect } from 'formik';

class ErrorFocus extends React.Component {
  componentDidUpdate(prevProps) {
    const { isSubmitting, isValidating, errors } = prevProps.formik;
    const keys = Object.keys(errors);
    if (keys.length > 0 && isSubmitting && !isValidating) {
      const selector = `[name="${keys[0]}"]`;
      const errorElement = document.querySelector(selector);
      errorElement.focus();
    }
  }

  render() {
    return null;
  }
}

export default connect(ErrorFocus);

<Formik>
  {({ dirty, isSubmitting, errors }) => {
    return (
      <Form>
        <Field />
        <Field />
        <ErrorFocus />
      </Form>
    );
  }}
</Formik>