Formik renders its children twice on every change

[ericmorand]

Consider the following sample:

import {createElement, type FunctionalComponent, render} from "preact";
import {Form, Formik, type FormikProps, type FormikValues} from "formik";

const component: FunctionalComponent = (properties) => {
  return createElement(Formik, {
      initialValues: {
        foo: ''
      },
      onSubmit: () => {}
    },
    (properties: FormikProps<{
      foo: string;
    }>) => {
      const {values, errors, setFieldValue} = properties;
      
      console.log('RENDERING...', values, errors);
      
      return createElement(Form, {},
        createElement('input', {
          type: "text",
          value: values.foo,
          onInput: (event) => {
            setFieldValue('foo', event.currentTarget.value);
          }
        })
      )
    }
  )
};

document.addEventListener('DOMContentLoaded', () => {
  const root = document.createElement('div');
  
  document.body.appendChild(root);
  
  render(createElement(component, {}), root);
});

On every change to the input, the console log is output twice - which means that Formik is rendering its children twice. I don't think I am doing anything wrong here, this is as straightforward as possible.