Property 'ref' does not exist on type IntrinsicAttributes & Pick<Pick<InputProps, "...">

Question

I am trying to implement antd input elements with react-hook-form. However, I am getting a following issue

Property 'ref' does not exist on type 'IntrinsicAttributes & Pick<Pick<InputProps, "form" | "slot" | "style" | "title" | "pattern" | "type" | "id" | "name" | "placeholder" | "required" | ... 281 more ... | "bordered"> & Partial<...>, "form" | ... 290 more ... | "bordered"> & { ...; } & { ...; }'. TS2769

This issue is shown on the line

<Input type={type} placeholder={placeholder} id={id} ref={ref}/>

If I remove ref part, I cannot have validation check and values are not binded. I am using forwardRef but still getting an issue

This is what I have done

Input.tsx

import styled from 'styled-components';
import AntInput from 'antd/es/input'
import { InputProps } from 'antd/es/input/Input';

const Input = styled((props: InputProps) => <AntInput {...props} />)`
    border: 1px solid #d7cce4;
    border-radius: 10px;
    background-color: #f5f2f8;
    &.ant-input {
    width: 100%;
    }
    }
    .ant-input:placeholder-shown {
        text-overflow: ellipsis;
    }
    &:hover {
        border: 1px solid #d7cce4;
    }
`;
export default Input

interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label?: React.ReactNode;
  type?: 'text' | 'email';
  id?: string;
  name: string;
  placeholder?: string;
  customClassName?: string;
  required?: boolean;
  errors: any;
}

const InputField = React.forwardRef<HTMLInputElement, InputProps>(
  (props, ref) => {
    const {
      label,
      type = 'text',
      id,
      name,
      placeholder,
      customClassName = '',
      required = false,
      errors
    } = props;
    return (
      <>
      <InputFieldWrapper>
        <FlexColumn>
          {label && <Label id={id || name} children={label} required={required} />}
          <Input type={type} placeholder={placeholder} id={id} ref={ref}/>
          {errors && errors?.[name] && <Error>{errors[name]}</Error>}
        </FlexColumn>
      </InputFieldWrapper>
      </>
    );
  }
);

export default InputField;

I am using InputField on Controller component of 'react-hook-form'

export default function Form() {
  const { control, register, errors, handleSubmit } = useForm({
    resolver: yupResolver(schema),
  });
  console.log("errors", errors);
  const formSubmit = (val: any) => {
    console.log("val", val);
  };
  return (
    <form onSubmit={handleSubmit(formSubmit)}>
        <Controller
          as={Input}
          name="username"
          id="username"
          control={control}
          placeholder="Username"
          label="Username"
          ref={register({ required: true })}
          required
        />
    </form>
  );
}

What's causing this issue?