类型 A 不可分配给带有 antdesign 的 typescript 中的 B 类型

Question

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

Answer 1

Try:

import { Button, Col, Input, Row, InputRef } from "antd";

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