I have an useState, but when add user rendered, React show an error. I dont know why React show an error. it seems valid code

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

I have an error on delete function:

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;

An error Message like this:

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

when i return it, it show another error message:

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

My userLists is like this:

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;