What does this mean that the props.items are undefined? The parent component is supposed to pass the data down to the Users component. I've checked the Users component is correctly receiving the object with the data. So is there something wrong with the syntax in the JSX?

The error message:

TypeError: props.items is undefined
Users
C:/...src/components/Users/Users.js:3

  1 | function Users(props) {
  2 |   return (
> 3 |     <ul>
  4 |       {props.items.map((user) => (
  5 |         <div>
  6 |           {user.name} - {user.age}

The parent component:

import {useState} from 'react';
import Card from './components/UI/Card';
import Form from './components/Form/Form';
import users from './data/data';
import Users from './components/Users/Users';

function App() {
  const [userDB, setUserDB] = useState(users);
  function addUserToDB(user) {
    setUserDB(prevUsers => {
      return [user, ...prevUsers];
    });
  };

  return (
    <div>
      <Card>
        <Form onAddToDB={addUserToDB} />
      </Card>
      <Users userData={userDB} />
    </div>
  );
}

export default App;

The Users component where the error traces to:

function Users(props) {
  return (
    <ul>
      {props.items.map((user) => (
        <div>
          {user.name} - {user.age}
        </div>
      ))}
    </ul>
  );
}

export default Users;