I'm building a basic custom component for input masking (rolling my own!), which returns an input field for a form.

import React, { useState, useEffect, useRef } from "react";
import mask from "./mask";

const InputMask = props => {
    let { 
        field,
        register, 
        type, 
        inputMaskType, 
        defaultValue
    } = props;

    const inputField = useRef();
    const [fieldValue, setFieldValue] = useState("");

    const onInputLoad = () => {
        setFieldValue(mask.maskShortDateOnLoad({
            inputField,
            defaultValue
        }));
    };

    const onInputChange = () => {
        setFieldValue(mask.maskInput({
            type: inputMaskType,
            inputField,
            defaultValue
        }));
    };

    useEffect(() => {
        onInputLoad();
    }, []);

    return (
        <>
            <input 
                {...register(field)}
                ref={inputField}
                type={type}
                onChange={onInputChange}
                value={fieldValue || ""}
            />
        </>
    );
};

export default InputMask;

Used like so, in the parent component, in the form:

<InputMask
    type="text" 
    field="from_date"
    register={register} 
    inputMaskType={inputMaskType.SHORT_DATE}
    defaultValue={selectedEntity.from_date} 
/>

It's binding to the field when the form loads, because the registered field is reading the data in. It shows up. On save, however, the custom field's data is not updated. It remains the same as it was when first loaded.

Looking at it in dev tools, it has the correct "name" property on the tag, and it looks like all the others in the form.

I guess I don't get it! It's an input, nested in another component, and it's registered like every other input in the form. I'm passing register down and doing what I'm supposed to. Is the state change reloading w/ the old data? Am I going to be forced to use a Controller? If so...how in this case? What am I doing wrong?