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

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

const Component = ({ defaultValue }) => {
  return <input defaultValue={defaultValue} />;
};
 
export default function App() {
  return <Component defaultValue="123" />;
}

const Component = ({ defaultValue }) => {
  const [state, setState] = React.useState(defaultValue);
  return (
    <input
      defaultValue={defaultValue}
      onChange={(e) => setState(e.target.value)}
      value={state}
    />
  );
};