How can I type the useState variable in react?

I’m having some typescript interfaces an usestate hook, and trying to type it. And while comparing prop variable with usestate variable I’m getting the error This comparison appears to be unintentional because the types ‘string’ and ‘IName’ have no overlap. Even though all the interfaces variables are string. But they don’t match as I see. I’m expecting to type thie function variables compared.

interface IName {
  name: string;
}

interface IPassword {
  password: string;
}

type Props = {
  authors: {
    author_name: string;
    password: string;
  }[];
};

const Login: FC<Props> = ({ authors }) => {

    const [name, setName] = useState<IName>({ name: "" });
    const [password, setPassword] = useState<IPassword>({ password: "" });

    const handleSubmit = (event) => {
      event.preventDefault();

      const userData = authors.find(
        (user) => user.author_name === name && user.password === password              // getting this line error sublimed
      );

    };
  }