You define the IUser interface using the IUser type and define the name, password status, which will cause problems because when you define this:

const [name, setName] = useState("");
// name will expected to be 
name = {
    name: 'name',
    password: 'password'
}

This is wrong because name, password is a string, so try defining it like this:

const [name, setName] = useState("");
const [password, setPassword] = useState("");

Then you have to fix passing the author to the FC component:

const Login: FC // instead of 

The last thing you have to fix this type to match the data type passed from App.tsx:

type Props = {
    authors: {
       author_name: string; // instead of name
       password: string;
    }[];
};


// because you are passing and comparing here with author_name not with name

const userData = authors.find(
  (user) => user.author_name === name && user.password === password
);

and you pass it from your application like this:

const Authors = [
   {
      id: "001",
      author_name: "John Smith", // not a name
      password: "123"
   }
 ];

Try changing [Props] to Props as shown below

const Login: FC = ({ authors }) => { ... }

Now it works because it requires an object instead of an array, we will pass an object like <Loginauthors={authors} />. Now, the author will be an array of objects.