Component breaks when upgrading from 6.3.3 to 6.3.4

Hi!

I am working on a quite big project that had been neglected a bit regarding package upgrades since 2018!!!. I have managed to upgrade to React 17.0.2 and most other packages are fairly new. This hasn´t been easy.

When I try to upgrade react-final-form to comply with React 17 one of my modules break. Specifically it fails to load some dynamic buttons.

There are no errors and I can´t really figure out where exactly it fails. (I still don´t quite understand all the code in this project)

It has something to do with "steps" not being loaded. It renders the component three times, then stops instead of rendering and loading the "steps".

Does anyone have an idea about what the issue could be?

I paste the code for the module below, although I can´t see any direct relation to react-final-form

```
import PropTypes from 'prop-types'
import React, { useEffect } from 'react'
import { useMutation } from 'react-query'
import { get, isEmpty, map } from 'lodash'
import styled from 'styled-components'

import { api } from '../../../../api'
import { sortBySequence } from '../../../../utils'
import { Truncated } from '../../../Truncated'
import { FormField } from '../../FormField'

const StyledButton = styled.button`
font-size: ${({ theme }) => theme.styles.workflow.buttons.fontsize};
line-height: ${({ theme }) => theme.styles.workflow.buttons.lineheight};
font-weight: ${({ theme }) => theme.styles.workflow.buttons.fontweight};
letter-spacing: ${({ theme }) => theme.styles.workflow.buttons.letterspacing};
border-radius: ${({ theme }) =>
theme.styles.workflow.buttons.style.borderradius};
padding: ${({ theme }) => theme.styles.workflow.buttons.style.padding};

background-color: ${({ theme }) => theme.styles.workflow.buttons.bgcolor};
border: 1px solid ${({ theme }) => theme.styles.workflow.buttons.bgcolor};
color: ${({ theme }) => theme.styles.workflow.buttons.textcolor};
display: flex;
align-items: center;
justify-content: center;

&:hover:not(:disabled),
&:focus {
color: ${({ theme }) => theme.styles.workflow.buttons.bgcolor};
background-color: ${({ theme }) => theme.styles.workflow.buttons.textcolor};
}
`

const Buttons = styled.div`
position: static;
justify-content: center;
align-content: space-between;
column-gap: 12px;
margin-top: 24px;
margin-bottom: 0;
display: flex;
flex-wrap: wrap;

> button {
flex-grow: 0;
margin-bottom: 5px;
}
`

export const WorkflowSteps = (props) => {
const {
id,
setStep,
disabled,
path,
formData,
parentType,
templateId,
articleData,
} = props
const { mutate: getSteps, data, loading } = useMutation(api.evaluateMeasure)

useEffect(() => {
const article = get(formData, `values.${path}`) || articleData
if (id && !isEmpty(article) && parentType && templateId) {
getSteps({ article, parentType, templateId })
}
}, [id])

const steps = (data || []).filter((d) => !isEmpty(d)).sort(sortBySequence)

if (loading || isEmpty(steps)) return null

return (

{map(steps, (step) => (
setStep(step)}
disabled={disabled}
>

{get(step, 'functionname')}


))}

)
}

WorkflowSteps.propTypes = {
id: PropTypes.string.isRequired,
setStep: PropTypes.func.isRequired,
disabled: PropTypes.bool,
path: PropTypes.string,
formData: PropTypes.shape({}),
parentType: PropTypes.string,
templateId: PropTypes.string,
articleData: PropTypes.shape({}),
}

WorkflowSteps.defaultProps = {
disabled: false,
path: undefined,
formData: {},
parentType: undefined,
templateId: undefined,
articleData: {},
}
```