Integrate React Hook Form and React Number Format with custom Input

Question

I need to integrate React Hook Form with React Number Format using as customInput prop my own Input component -> https://s-yadav.github.io/react-number-format/docs/props/#custominput-reactcomponentany.

It works if I don't use the customInput prop but when I use that prop my Input template is rendered properly but the NumericFormat attributes like prefix don't work

Example:

If i write:

          <Controller
            control={control}
            name="salaryAmount"
            render={({ field: { onChange, name, onBlur, value, ref } }) => (
              <NumericFormat
                thousandSeparator={true}
                prefix={'$'}
                value={value}
                onValueChange={v => {
                  onChange(parseInt(v.value));
                }}
                onBlur={onBlur}
              />
            )}
          />

I see the below result, everything works as expected but i'm not using my custom input component yet.

but if I try to use the customInput prop -> https://s-yadav.github.io/react-number-format/docs/props/#custominput-reactcomponentany to use my own Input component style and props it show my template but doesn't work the attributes

          <Controller
            control={control}
            name="salaryAmount"
            render={({ field: { onChange, name, onBlur, value, ref } }) => (
              <NumericFormat
                thousandSeparator={true}
                prefix={'$'}
                value={value}
                onValueChange={v => {
                  onChange(parseInt(v.value));
                }}
                onBlur={onBlur}
                customInput={Input}
              />
            )}
          />

and I see this:

As you can see the style is the correct one but i lost the prefix and the thousandSeparator

My Input component is a simple react component return an input html field with some class applied

import { icons } from '../../../icons';
import Icon from '../icon/Icon';
import classes from './Input.module.css';

interface InputProps {
  id?: string;
  type?: string;
  placeholder?: string;
  value?: any; // use generic !!!
  label?: string;
  required?: boolean;
  disabled?: boolean;
  name?: string;
  info?: boolean;
  col?: number;
  register?: any; // use type!!!
}

export default function Input(props: InputProps) {

  return (
    <div className={classes[`col-${props.col}`]}>
      {props.label && (
        <label className={classes.input__label}>
          {props.label}
          {props.required ? '*' : ''}
        </label>
      )}
      {props.info && (
        <Icon
          className={classes.input__info}
          iconName={icons.INFO}
        />
      )}
      <input
        className={classes.input}
        id={props.id}
        type={props.type}
        disabled={props.disabled}
        placeholder={
          props.placeholder
            ? `${props.placeholder}${props.required ? '*' : ''}`
            : ''
        }
        {...props.register}
      />
    </div>
  );
}