Https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-react-part-ii/modules/fscp-appointment-planner/projects/appointment-planner

https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-react-part-ii/modules/fscp-appointment-planner/projects/appointment-planner
in the last of that project i want to render the “Appointments Informations”. but the form render me the appointments in this form :
"
contact:

date:

time: "

I pass the information by props as well as it expected to be passed so this is all the files :
first the App file:

import { AppointmentsPage } from "./containers/appointmentsPage/AppointmentsPage";
import { ContactsPage } from "./containers/contactsPage/ContactsPage";

function App() {
  /*
  Define state variables for 
  contacts and appointments 
  */
const [contacts, setContacts] = useState([{name:"Farid", phone:+14570258, email:"faridgh@farou.com"}, {name:"Ali", phone:+28573258, email:"alimm6@alia.com"},
 {name:"Kamel", phone:+14970603, email:"kamel04@kam.com"}]);
const [appointments, setAppointments] = useState([{title:"work", date:"27/10/2021", time:"9:00"},
{title:"change time", date:"24/10/2021", time:"8:30"}, {title:"health care", date:"02/11/2021", time:"9:00"}]);
  const ROUTES = {
    CONTACTS: "/contacts",
    APPOINTMENTS: "/appointments",
  };

  /*
  Implement functions to add data to
  contacts and appointments
  */
  const addContacts = (name, phone, email) => {
    let contact = {
      name: name,
      phone: phone,
      email: email,
    };
    setContacts(prevContacts => [...prevContacts, contact]

    )
  };
  const addAppointments = (title, contact, date, time) =>{
const appointment = {
  title: title,
  contact: contact,
  date: date,
  time: time
};
setAppointments(prevAppointments => [...prevAppointments, appointment])
  }

  return (
    <>
      <nav>
        <NavLink to={ROUTES.CONTACTS} activeClassName="active">
          Contacts
        </NavLink>
        <NavLink to={ROUTES.APPOINTMENTS} activeClassName="active">
          Appointments
        </NavLink>
      </nav>
      <main>
        <Switch>
          <Route path={ROUTES.CONTACTS}>
        
            <ContactsPage onAdd={addContacts}  contacts={contacts}  />
          </Route>
          <Route path={ROUTES.APPOINTMENTS}>
          
            <AppointmentsPage contacts={contacts} onAdd={addAppointments} appointments={appointments} />
          </Route>
        </Switch>
      </main>
    </>
  );
}

export default App;

then this is the appointments file :

import React, {useState} from "react";
import {TileList} from "../../components/tileList/TileList";
import {AppointmentForm} from "../../components/appointmentForm/AppointmentForm";

export const AppointmentsPage = (props) => {
  /*
  Define state variables for 
  appointment info
  */
  const [title, setTitle] = useState('');
  const [contact, setContact] = useState(null);
  const [date, setDate] = useState("");
  const [time, setTime] = useState("");
  const {appointments, contacts, onAdd} = props;


 const handleTitleChange = (event) => {
  setTitle(event.target.value)
 }
 const handleDateChange = (event) => {
  setDate(event.target.value)
 }

 const handleTimeChange = (event) => {
  setTime(event.target.value)
 }
    const handleChoose = (name) => {
      const choosedContact = contacts.find(contact => contact.name === name);
      console.log(choosedContact)
      setContact(choosedContact)
   }
  const handleSubmit = (e) => {
    e.preventDefault();
    /*
    Add contact info and clear data  
    */
   props.onAdd(title, contact, date, time);
   console.log(title)
   setTitle('');
   setContact('');
   setDate('');
   setTime('');
  };
 
 

  return (
    <div>
      <section> 
        <h2>Add Appointment</h2>
        <AppointmentForm onSubmit={handleSubmit} onChoose={handleChoose} contacts={props.contacts} title={props.title} date={props.date} time={props.time} onChangeTitle={handleTitleChange} onChangeDate={handleDateChange} onChangeTime={handleTimeChange} />
        
      </section>
      <hr />
      <section>
        <h2>Appointments</h2>
        <TileList data={props.appointments} />
      </section>
    </div>
  );
};

this is the appointmentForm :

import React from "react";
import {ContactPicker} from "../contactPicker/ContactPicker";


export const AppointmentForm = (props, {
  
  title,
  setTitle,
  contact,
  setContact,
  date,
  setDate,
  time,
  setTime,
  handleSubmit
}) => {
  
  const getTodayString = () => {
    const [month, day, year] = new Date()
      .toLocaleDateString("en-US")
      .split("/");
    console.log(`${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`);
  };

  return (
    
  <form onSubmit={props.onSubmit} >
    <label>
    Enter the title:
    <input type="text" value={props.title} name="title" onChangeTitle={props.onChangeTitle} />
    </label>
   <label>
    Enter the date:
    <input type="date" value={props.date} name="date" onChangeDate={props.onChangeDate} />
    </label>
    <label>
    Enter the time:
    <input type="time" value={props.time} name="time" onChangeTime={props.onChangeTime} />
    </label>
     <ContactPicker contacts={props.contacts} onChoose={props.onChoose}  />
    
    <button type = 'submit'>Click to submit</button>
    </form>

  );
};

finally this is the contactPicker file:

import React from "react";
import {DropdownMenu} from "reactstrap"


export const ContactPicker = (props) => {
const contacts = props.contacts;

  const handleChoose = (event) => {
  	props.onChoose(event.target.value)
  }
  return (
  	<div className="dropdown-button" >
  <select>
  
     <option disabled selected value> -- select an option -- </option>
   	<DropdownMenu>All Contacts</DropdownMenu>  	
   	{contacts.map((contact, index) => <option onChoose={handleChoose} > {contact.name} </option> 
   	)
  
  }
  
   </select>
    </div>
  );
};