InnerField.tsx

import React, { useState, useEffect } from "react";

interface ChildrenPropType {
    handleChange: (e: any) => void,
    value: string
}

interface PropType {
    fieldData: any,
    shouldReinitialize: (data: any) => Boolean,
    getFieldValue: (data: any) => string,
    children: (data: ChildrenPropType) => JSX.Element
}

const Inner = (props: PropType) => {
    const [inner, setInner] = useState("");

    useEffect(() => {
        const {
            fieldData,
            getFieldValue,
            shouldReinitialize
        } = props;
        if (!fieldData) return;

        const initialValue = getFieldValue(fieldData) || "";

        if (!inner || shouldReinitialize(fieldData)) {
            setInner(initialValue);
        }
    });

    const handleChange = (e: any) => setInner(e.target.value);

    return props.children({ handleChange, value: inner })
};

export default Inner;