reactjs - Dispatch>; }' ไม่สามารถกำหนดค่าให้กับชนิด 'IntrinsicAttributes & Props' ได้

ฉันกำลังมีปัญหาที่ค่อนข้างแปลกในการใช้ React JS และ Typescript ฉันได้ประกาศ hook และกำลังส่งฟังก์ชันลงไปในคอมโพเนนต์ลูก ทุกครั้งที่ฉันทำเช่นนี้ ฉันจะได้รับข้อผิดพลาดดังต่อไปนี้:

Compiled with problems:

ERROR in src/Screens/Login/Components/LoginForm.tsx:59:11

TS2322: Type '{ setEmail: Dispatch<SetStateAction<string>>; setPassword: Dispatch<SetStateAction<string>>; setForgotPassword: Dispatch<SetStateAction<boolean>>; }' is not assignable to type 'IntrinsicAttributes & Props'.
  Property 'setForgotPassword' does not exist on type 'IntrinsicAttributes & Props'. Did you mean 'setForgetPassword'?
    57 |           setEmail={setEmail}
    58 |           setPassword={setPassword}
  > 59 |           setForgotPassword={setForgotPassword}
       |           ^^^^^^^^^^^^^^^^^
    60 |         />
    61 |       </Container>
    62 |     </Root>

ตัวอย่างโค้ดมีดังนี้:

ส่วนประกอบหลัก

import React from 'react';
import LoginDetails from './LoginDetails';


export default function LoginForm() {
  const [email, setEmail] = React.useState<string>('');
  const [password, setPassword] = React.useState<string>('');
  const [forgotPassword, setForgotPassword] = React.useState<boolean>(false);
    
      return (
            <LoginDetails
              setEmail={setEmail}
              setPassword={setPassword}
              setForgotPassword={setForgotPassword}
            />
      );

คอมโพเนนต์ลูก:

import React from 'react';

type Props = {
   setEmail: (email: string) => void;
   setPassword: (password: string) => void;
   setForgetPassword: (forgotPassword: boolean) => void;
 }

export default function LoginDetails({ setEmail, setPassword, setForgetPassword }: Props) {
  return (
    <div onClick={() => setForgetPassword(true)}>
          Forgot password?
    </div>
  )
}

มีใครมีไอเดียไหมว่าทำไม?

คำตอบ #1

ดังที่ข้อผิดพลาดบอกไว้ ฉันต้องเปลี่ยนชื่อฟังก์ชันจาก:

  const [forgotPassword, setForgotPassword] = React.useState<boolean>(false);

ถึง

const [forgotPassword, setForgetPassword] = React.useState<boolean>(false);

คงต้องเล่นคำแล้วมั้ง