MUI TextField label (with custom NumberFormat) displayed on top of value

Question

When the component doesn't have focus the label "Loan Amount" is displayed on top of the value. If I select the component the label shrinks and displays above the value. I would expect when the component is not selected and it has a value for the label to be displayed above the value like when its selected.

Component

const NumberFormatComponent = (props) => {
  const { inputRef, onChange, ...other } = props;
  return (
    <NumberFormat
    {...other}
    getInputRef={inputRef}
    onValueChange={values => {
      onChange({
        target: {
          name: props.name,
          value: values.value
        },
      });
    }}
    thousandSeparator
    isNumericString
    prefix="$"
  />
  );
};

Usage

        <TextField
          label="Loan Amount"
          value={values.numberformat}
          onChange={handleChange}
          name="numberformat2"
          id="formatted-numberformat-input2"
          InputProps={{
            inputComponent: NumberFormatComponent,
          }}
          variant="standard"
        />

Example of label displaying on top of value

Answer 1

        <NumberFormat
          label="Loan Amount"
          customInput={TextField}
          variant="standard"
          thousandSeparator
          isNumericString
          prefix="$"
        />