reset not working as intended on switching edit mode form to view mode

[chumba-wamba]

I am using react-hook-form to create a view/edit page. The page contains multiple sections which are collapsed by default. All of these sections are rendered within one form when edit mode is enabled to submit all the updated fields to the server in one shot.

A server call is made on expanding a section to fetch the metadata aka names, labels, values, and the type of all the input fields associated with the section.

The FieldRenderer component is responsible for the view and edit mode of the field. It also conditionally renders a checkbox, input, etc. depending on the fieldType (which is a part of the field object).

<Controller
    control={control}
    defaultValue={fieldValue}
    name={fieldName}
    render={({ field: { name, onBlur, onChange, ref, value } }) => (
        <FieldRenderer
           // toggles view/edit mode for the field
            editMode={editMode}
            // `field` contains type which determines `fieldType` and name is passed to the `input` name attribute
            fieldData={{ ...field, name }}
            onBlur={onBlur}
            onChange={onChange}
            ref={ref}
            value={value}
        />
    )}
/>

I am initializing useForm without any defaultValues since its impossible to know them at compile time or via a server call due to the constraints of the application. Further, I am making use of FormProvider and useFormContext to pass methods from useForm to all the children components.

The edit mode works as expected but when I update some fields and try to reset the form on switching back to view mode (via a Cancel button), the form still reflects the changed values.

const handleCancel = () => {
    reset(initialValuesRef.current) // A ref that collects the initial values of every section as they are expanded
    setEditMode(false);
};

What should be the correct way to achieve the intended behavior, here?