React issue with retaining error message when switching between components

Question

I have a React app with multiple containers/section components which have the Field component rendered inside them. These sections get displayed on screen based on the click of the corresponding tab/links (e.g. Section 1, Section 2, etc) On each section tab/link click, the other MySectionX component is kind of destroyed/removed from DOM as below;

{mySection1 && <MySection1 section={section1} {...props} />}
{mySection2 && <MySection2 section={section2} {...props} />}

In MySection component, I define the field as below and invoke the Field component

let myField = {
    "id": "my-field-1",
    "mandatory": true,
    "visible": true,
    "minFieldLength": 0,
    "items": {},
    "value": "My Field Val 1",
    "event": false,
    "disabled": false,
    "hidden": false,
    "overrideValue": false,
    "readonly": false,
    "fieldLabel": "My Field",
    "newCustomField": false,
    "overrideFieldType": false,
    "editable": true
}

This model is passed to Field as below

<Field key={myField.id} field={myField} handleFieldChange={handleFieldChange} changeFields={changeFieldValues}  />)

My Field component is defined as below

function Field({ classes, field, fieldWidth = '12em', margin = '0 1.5em', handleOnBlur, inputExceptions, validateInputValue, handleFieldChange, inputDisable, showLabel = true, changeFields }) {
    
    const { register } = useFormContext();
    const data = useSelector(state => state.formData.data);
    
    let exceptions = inputExceptions;
    if (field.errorMessages && field.errorMessages.length > 0) {
        exceptions = field.errorMessages;
    }

    let helperText = exceptions && exceptions[0] && exceptions[0].message;
    
    const editableField = () => {
        return (<MyFormField helperText={helperText}
            required={field.mandatory} validationState={exceptions.length > 0 ? 'error' : ''} id={field.id} label={labelText}>
            <Input 
                {...register(field.id)} 
                defaultValue={field.value} 
                value={field.value}
                onChange={handleOnChange} 
                readOnly={field.fieldLength == 0} 
                inputProps={{ maxLength: field.fieldLength, autoComplete: "off", role: 'input' }} 
                disabled={inputDisable} />

        </MyFormField>);
    };

    return editableField;

}

export default withValidation(Field);

I have a HOC as below

export const withValidation = (WrappedComponent) => {
   return function Validator({field, ...otherProps}) {
        const inputValidationRules = [];
        const mandatoryRule = value => value !== '';
        const regexMessage = () => <span>'{field.value}' is not a valid input.</span>;

        if( field.mandatory === true){
            inputValidationRules.push(rule(mandatoryRule, mandatoryMessage)); 
        }
         if(field.regex && field.regex.length > 0) {
            regex = new RegExp(field.regex);
            inputValidationRules.push(rule(regexRule, regexMessage));
        }
        
        const [inputExceptions, validateInputValue] = useValidation(inputValidationRules);
        return (
        <WrappedComponent inputExceptions = {inputExceptions} field = {field} validateInputValue={validateInputValue} {...otherProps}>

        </WrappedComponent>)
    }
}

Now the issue is in retaining error messages below the field while switching between different sections.

Example : Say I am on section 1 and I clear the required field in Section 1. So I get the error below this field. So far, this is good. But the moment I click on section 2 and come back to section 1, the error message disappears. So I am wondering how I can get the inputExceptions from the HOC, when switching betwen different sections.