How do I stop Formik blurring on state change in hook?

Here is a nice minimum reproducible example for my problem:

import React from 'react';
import { render } from 'react-dom';
import { Formik, Form, Field } from 'formik';

const App = () => {
  const [imgSrc, setImgSrc] = React.useState('');
  
  return <>
    <Formik
    initialValues={{
      'imgSrc': '',
    }}
    >
      <Form>
        <img src={imgSrc} alt="whatever you typed in" />
        <Field 
          name="imgSrc" 
          onChange={e => setImgSrc(e.target.value)}
        />
      </Form>
    </Formik>
  </>;
}

render(<App />, document.getElementById('root'));

Whenever I update imgSrc (the field with that name attribute) then Formik seems to reset and blur the input… This is very annoying!

How can I get Formik to stop doing this?

I’ve also provided a nice codesandbox.