Tengo un useState, pero cuando agrego un usuario renderizado, React muestra un error. No sé por qué React muestra un error. parece codigo valido

 const [users, setUsers] = useState([]);

Tengo un error en la función de eliminación:

 function App() { const [users, setUsers] = useState([]); const userAddHandler = input => { setUsers(prevState => { return [...prevState, input] }) } const deleteUserHandler = userId => { setUsers(userData => { userData.filter(user => { return userId !== user.id }) }); } return ( <div> <AddUser onAddUser={userAddHandler} /> <UserLists users={users} onDelete={deleteUserHandler} /> </div> ); } export default App;

Un mensaje de error como este:

 TypeError: userData is undefined deleteUserHandler/< src/App.js:17 14 | 15 | const deleteUserHandler = userId => { 16 | setUsers(userData => { > 17 | userData.filter(user => { 18 | ^ return userId !== user.id 19 | }) 20 | });

cuando lo devuelvo, muestra otro mensaje de error:

 Cannot update a component (`App`) while rendering a different component (`UserLists`). To locate the bad setState() call inside `UserLists`

Mis listas de usuarios son así:

 const UserLists = (props) => { return ( <ul> {props.users.map((user) => { return ( <div className={styles.userLists} key={user.id} onClick={props.onDelete(user.id)} > <Card> <li>{`${user.username} (${user.age} Years Old)`}</li> </Card> </div> ); })} </ul> ); }; export default UserLists;