Type A is not assignable to type B in typescript with antdesign

Hi guys I was writing this code in typescript with using ant design and I got this issue (TS2322). I wanted to use 'Input' from 'Ant Design' and set the first value as null. After that I was gonna put it in the Input it occurs some errors. Does anyone know how to solve this issue? Thank you for your help in advance! *FYI: my antd version is 4.21.0 and typescript is 4.7.2

import { Button, Col, Input, Row } from "antd";
import { useRef } from 'react';
import styles from './Signin.module.css';

export default function Signin() {
const emailRef = useRef<typeof Input>(null);
const passwordRef = useRef<typeof Input>(null);

  return <Row align="middle" className={styles.signin_row}>
    <Col span={24}>
      <Row className={styles.signin_contents}>
        <Col span={12}>
          <img src="/bg_signin.png" alt="Signin" className={styles.signin_bg}/>
        </Col>
        <Col span={12}>
          <div className={styles.signin_title}>My Books</div>
          <div className={styles.signin_subtitle}>Please Note Your Opinion</div>
          <div className={styles.signin_underline} />
          <div className={styles.email_title}>
            Email
            <span className={styles.required}> *</span>
          </div>
          <div className={styles.input_area}>
            <Input 
            placeholder="Email"
            autoComplete="email"
            name="email" className={styles.input}
            ref ={emailRef}/>
          </div>
          <div className={styles.password_title}>
            Password
            <span className={styles.required}> *</span>
          </div>
          <div className={styles.input_area}>
            <Input 
            type="password"
            autoComplete="current-password"
            name="password"
            className={styles.input}
            ref={passwordRef}/>
          </div>
          <div className={styles.button_area}>
            <Button size="large" className={styles.button}>Sign In</Button>
          </div>
        </Col>
      </Row>
    </Col>
  </Row>

}

Add: oops I forgot to put what the error message says!

Typescript message explains why your emailRef type doesn't match Input ref required type:

Type 'RefObject<CompoundedComponent>' is not assignable to type 'Ref<InputRef> | undefined

So my clue is that you should use InputRef as generic type for emailRef:

const emailRef = useRef<InputRef>();

You can find similar example in antd docs in 'Focus with additional option' code example: https://ant.design/components/input/#Input.TextArea

import type { InputRef } from 'antd';

import { Button, Input, Space, Switch } from 'antd';
import React, { useRef, useState } from 'react';

const App: React.FC = () => {
  const inputRef = useRef<InputRef>(null);
  const [input, setInput] = useState(true);
....

Try:

const emailRef = useRef<InputRef | null>(null);