Challenge project: Appointments Planner

i want to pass the props from the parent component to the child component but that’s not doing well this is my two files, first this is the App.js file :

import React from "react";
import { Switch, Route, Redirect, NavLink } from "react-router-dom";

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:0014570258, email:"faridgh@farou.com"}, {name:"Ali", phone:0028573258, email:"alimm6@alia.com"}, {name:"Kamel", phone:0014970603, email:"kamel04@kam.com"}]);
const [appointments, setAppointments] = useState([{title:"work", contact, date:"27/10/2021", time:"9:00"},
{title:"change time", contact, date:"24/10/2021", time:"8:30"}, {title:"health care", contact, 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) => {
   const 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} data={contacts} />
         </Route>
         <Route path={ROUTES.APPOINTMENTS}>
         
           <AppointmentsPage onAdd={addAppointments} data={appointments} />
         </Route>
       </Switch>
     </main>
   </>
 );
}

export default App;

now this is the contactsPage.js file :

import React from "react";

export const ContactsPage = (props) => {
  /*
  Define state variables for 
  contact info and duplicate check
  */

  const handleSubmit = (e) => {
    e.preventDefault();
    /*
    Add contact info and clear data
    if the contact name is not a duplicate
    */
  };

  /*
  Using hooks, check for contact name in the 
  contacts array variable in props
  */

  return (
    <div>
      <section>
        <h2>Add Contact</h2> 
      </section>
      <hr />
      <section>
        <h2>Contacts</h2>
    
        {props.data.map((contact, index) => { return ( <ul key={index}>
        <li>{contact.name}</li>
        <li>{contact.phone}</li>
        <li>{contact.email}</li>
        </ul>)})}
    
      </section>
    </div>
  );
};

````