Dynamic formik form and setFieldValue - reactjs

Question

So I'm working on a client website that has a page with a date and time picker component. It also has a dynamic formik form that is created by som json coming from the CMS where they can build forms.
The form has 2 hidden fields. I change the form json when you select a date or time to save the values in the hidden for fields. But I ran into a problem getting formik to register the values when I submit. Showing the values in the DOM or even doing a console log shows the value. But I need to call setFieldValue before formik knows the values.
return (
<div className="o-container-small c-rte rich-text-wrapper">
<h2 className="display-3 mb-4">{title}</h2>
<p>{description}</p>
{submitSuccessful && successMessage ? (
<div className="mt-20px" dangerouslySetInnerHTML={{ __html: successMessage }} />
) : (
<Form onSubmit={handleSubmit}>
{({ setFieldValue, setFieldTouched }) => (
<div className="flex flex-wrap -mx-10px mt-30px">
{fields.map((f, index) => (
<div
className={
capitalizeFirstLetter(f.type) !== FormFieldType.Hidden ||
capitalizeFirstLetter(f.type) !== FormFieldType.HiddenDate ||
capitalizeFirstLetter(f.type) !== FormFieldType.HiddenTimeSpan
? `w-full ${!!f.size && `form-block--width-${f.size}/3`} px-10px pb-20px`
: ""
}
key={index}
>
<DynamicField
{...f}
submitPending={submitPending}
error={showError}
onChange={(v: string | number) => setFieldValue(f.id as string, v)}
onBlur={() => setFieldTouched(f.id as string)}
/>
</div>
))}
</div>
)}
</Form>
)}
</div>
);
The hidden field component looks like tis. The only way I can get it to work is if I do a useEffect to call onChange. But if I add onChange to my dependency array in the useEffect I get an endless loop.
import React, { FC, useEffect } from "react";
import { FormField } from "#cryos/shared/form";
import { IFormFieldProps } from "../field";
export type IHiddenFieldProps = IFormFieldProps;
export const HiddenField: FC<IHiddenFieldProps> = (props) => {
const { id, value, onChange } = props;
useEffect(() => {
if (value) {
onChange(value);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [value]);
return (
<FormField name={id ?? ""} defaultValue={value}>
{({ field }) => {
field.value = value;
return <input type="hidden" {...field} value={field.value} />;
}}
</FormField>
);
};