Field loses focus (React rerenders) when inside a react-bootstrap-table-next table

[osnofa]

🐛 Bug report

Current Behavior

When trying to write in a formik's Field component inside a react-bootstrap-table-next's BootstrapTable, after the first change to the value, it will lose focus, presumably react is re-rendering the whole Field.

Expected behavior

It should be possible to keep changing the value of a specific object's attribute inside an array without losing focus.

Reproducible example

To understand the problem check the first table on this CodeSandbox example.

The second table shows the workaround I implemented to make formik's props.values have the intended changes.

Additional context

Some of the code in that CodeSandbox may seem unnecessary (such as arrayHelpers, or the placement of the columns for BootstrapTable), but that is because the example is just a representation of what my project is using, those need to be there.

Your environment

Software	Version(s)
Formik	2.1.2
React	16.12.0
TypeScript
Browser	Firefox 72.0.1 / Chrome 79.0.3945.130
npm/Yarn	npm 6.13.0
Operating System	Windows 10

[ramkumarvs]

@osnofa did you solve this issue?

[osnofa]

@ramkumarvs No, I'm still using the workaround I did in the example I provided.