已创建表单组件

用法

<Form
     initialValues={{
                title: '',
                name: ''
            }}
            onSubmit={formSubmit}
        >
            <Form.Field
                name="title"
            >
                <Input placeholder="Наименование" />
            </Form.Field>
            <Form.Field
                name="name"
            >
                <Input placeholder="Еще поле" />
            </Form.Field>
            <Button>Сохранить</Button>
        </Form>

表单组件

import { FormField } from './FormField';

import { FormProps, FormContextT } from './../../../types/form';

import './style.scss';

export const FormContext = React.createContext<FormContextT>({
    formData: {},
    handleFieldChange: () => {}
});

export const Form = (props: FormProps): JSX.Element => {

        const { children, initialValues, className, onSubmit } = props;
        
        const [ formData, setFormData] = useState(initialValues);
        
        const handlerSubmit = (e: React.SyntheticEvent): void => {
            e.preventDefault();
            
            onSubmit();
        }
    
        const handleFieldChange = (name: string, value: string) => {
            setFormData({
                ...formData,
                [name]: value
            });
        }
    
        const context:FormContextT = {
            formData,
            handleFieldChange
        }
    
        return (
            <FormContext.Provider value={context}>
                <form 
                    onSubmit={handlerSubmit}
                >
                    {children}
                </form>
            </FormContext.Provider>
        )
    }
    
    Form.Field = FormField

FormField组件

import React, { useContext } from 'react';
import { FormContext } from './Form';
import { FormFieldProps } from './../../../types/form';
export const FormField = (props: FormFieldProps): JSX.Element => {

    const { name, children } = props;
    
    const formContext = useContext(FormContext);
    const { formData, handleFieldChange } = formContext;
    
    const fieldChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        handleFieldChange(name, e.target.value);
    
        if('onChange' in children.props) {
            children.props.onChange(e);
        }
    }
    
    console.log('re-render: ' + name);
    
    return (
        React.cloneElement(children, {
            name,
            onChange: fieldChange,
            value: formData[name]
        })
    );

}

输入组件

export const Input = (props: PropsTypes) => {

    const { className, value, name, placeholder, disabled, onChange, type = 'text' } = props;
    
    console.log('re-render-input: ' + name);
    
    return (
        <input
            type={type}
            name={name!}
            value={value!}
            placeholder={placeholder!}
            disabled={disabled!}
            onChange={onChange!}
        />
    )

}

所有表单域值都以{field：value}，并通过React Context传递给FormField。问题是，当字段值被覆盖时，父组件中的formData会被更新，所有子FormField都会被重新渲染。告诉我如何使它只被更改的子项被重新渲染。
已尝试使用UseMemo钩子，但无法正确应用。