React Final Form Scroll To Error HOC

import { compose, withHandlers } from 'recompose'
import { animateScroll } from 'react-scroll'

const scrollToFirstError = errors => {
  const errorFields = errors
  // Using breakable for loop
  for (let i = 0; i < errorFields.length; i++) {
    const fieldName = `position-${errorFields[i]}`
    // Checking if the marker exists in DOM
    const elements = document.querySelectorAll(`[name="${fieldName}"]`)
    if (elements.length) {
      animateScroll.scrollTo(elements[0].offsetTop - 50) // animate directly to the right position
      break
    }
  }
}

const removeEmpty = obj => {
  Object.keys(obj).forEach(key => {
    if (obj[key] && typeof obj[key] === 'object') removeEmpty(obj[key])
    else if (!obj[key]) delete obj[key]
  })
  return obj
}

const objToArray = obj => {
  return Object.keys(obj)
}

export const withScrollToError = compose(
  withHandlers({
    handleScrollAndSubmit: ({ handleSubmit, form }) => e => {
      const fieldsWithErrors = objToArray(removeEmpty(form.getState().errors)) // get this from render props of RFF <Form /> component
      handleSubmit(e)
      scrollToFirstError(fieldsWithErrors)
    }
  })
)

//then wrap your form from redred props with this HOC and pass handleScrollAndSubmit to <form/>'s onSubmit prop