Dispatch<SetStateAction<boolean>>; }' is not assignable to type 'IntrinsicAttributes & Props'

I am having a bit of a peculiar issue using React JS and Typescript. I have declared a hook, and I am passing down a function into a child component Everytime I do this, i get the following error:

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>

The snippet of code is as follows:

Parent Component

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}
            />
      );

Child component:

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>
  )
}

Any ideas why?