Как решить проблему с передаванием defaultValue в свой кастомний компонент Input?

Question

[QnaTwitt]

У меня есть свой Input компонент, и передаю в него значение defaultValue, но почему-то оно остаётся пустым (использую ещё react hook form)
Вот компонент

import React, {
  ChangeEventHandler,
  forwardRef,
  InputHTMLAttributes
} from 'react';
import Icon from '../icon/Icon';
import Style from './Input.module.scss';

enum InputType {
  text = 'text',
  number = 'number',
  checkbox = 'checkbox'
}

type InputTypeString = keyof typeof InputType;

interface IInput extends InputHTMLAttributes<HTMLInputElement> {
  type?: InputTypeString;
  placeholder?: string;
  onChange?: ChangeEventHandler;
  required?: boolean;
  autoFocus?: boolean;
  classes?: string;
  value?: any;
  defaultValue?: string | number;
  select?: boolean;
  readonly?: boolean;
  openSelect?: boolean;
  onClick?: () => void;
}

const Input = forwardRef<HTMLInputElement, IInput>(
  (
    {
      type,
      placeholder,
      onChange,
      required,
      autoFocus,
      classes,
      value,
      select,
      readonly,
      openSelect,
      onClick,
      defaultValue
    },
    ref
  ) => {
    const customClass = classes ? classes : '';
    return (
      <>
        {!select && type === 'checkbox' ? (
          <label className={`${Style.checkbox} ${customClass}`}>
            <input
              ref={ref}
              type={type}
              value={value}
              onClick={onClick}
              onChange={onChange}
              required={required}
              readOnly={readonly}
              autoFocus={autoFocus}
            />
            <span className={Style.checkboxFake}></span>
            {placeholder ? <p>{placeholder}</p> : null}
          </label>
        ) : null}
        {!select && type !== 'checkbox' ? (
          <label className={`form-control ${Style.input} ${customClass}`}>
            <input
              ref={ref}
              type={type}
              value={value}
              onClick={onClick}
              onChange={onChange}
              required={required}
              readOnly={readonly}
              autoFocus={autoFocus}
              placeholder={placeholder}
              defaultValue={defaultValue}
              className={`control -single`}
            />
          </label>
        ) : null}
        {select ? (
          <label
            className={`form-control ${Style.input} ${Style.select} ${
              openSelect ? Style.openSelect : ''
            }`}
          >
            <input
              ref={ref}
              type={type}
              value={value}
              onClick={onClick}
              readOnly={readonly}
              placeholder={placeholder}
              defaultValue={defaultValue}
              className={`control -single`}
            />
            <Icon id="a-down" width={7} height={6} />
          </label>
        ) : null}
      </>
    );
  }
);

Input.displayName = 'Input';

export default Input;

Использую его на странице, где из select передаю значение, то есть вручную ввести его нельзя

<Select >
          <Input
            select={true}
            readonly={true}
            defaultValue={selectValue?.code}
            // value={selectValue?.code}
            openSelect={isContextOpen}
            {...register('currency')}
            onClick={() => setIsContextOpen(true)}
          />
</Select>

Вот так выглядит input в DOM

<input class="control -single" value="" readonly="">

У меня после выбора в select инпут остаётся пустым...

А если я не использую defaultValue а value тогда ругается что нету onChange...

Warning: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.