When there is no field.value for the existing product context works fine and updates the product name from nested dropdown correctly.

Context looks like this:

const NamingContext = React.createContext({
    name: '',
    setName: () => {}
});

The parent component looks like this:

const [name, setName] = useState('');
const value = { name, setName };
return (
    <Naming.Provider value={value}>
                <span>Product name</span>
                <Controller
                    name="Name"
                    control={props.control}
                    render={(field) => {
                        if (field.value) {
                            setName(field.name);
                        }
                        return (
                            <Input
                                value={value.name}
                                onChange={(e) =>
                                    field.onChange(e.target.value)
                                }
                            />
                        );
                    }}
                />

So for the blank editor when I choose from deeply nested child dropdown an available name it updates the context and shows the value in the above name input. However if there is a field.value it always overwrites newly selected value from the context. What is the smartest way to track the latest update in the above component. So if there is a field.value and then you select a new item from dropdown it will show the new value from the context and will not be overwritten by field.value again?