Matched leaf route at location

     //  I don't know why I am getting this error. 
     //  When I tried to Route using element, 
     //  I was able to use the routes.
     //  But when I tried using render inside the route to use component 
     //  along with props I am getting error as below-

. // "When I try to go to "localhost:3000" I get an error saying- // Error: // Matched leaf route at location / does not have an element. This means it will render an // "" with a null value by default resulting in an "empty" page. // Also, And I am unable to get my "contact list" and also add contact form."

    1.This is my App.js
     
      
  -----------------------------------------------------
             function App() {
 
    const LOCAL_STORAGE_KEY='contacts';

    const [contacts,setContacts]=useState([]); 
    const addContactHandler=(contact)=>{
    console.log(contact);
    setContacts([...contacts,{id:uuidv4(), ...contact}]);
    
      };


    const removeContactHandler= (id)=>{
    const newContactList = contacts.filter((contact)=>{
     return contact.id !== id;
    });
    setContacts(newContactList);
     };

    useEffect(()=>{
    const retriveContacts = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY));
    if(retriveContacts) setContacts(retriveContacts);
     },[]);

     useEffect(()=>{
     localStorage.setItem(LOCAL_STORAGE_KEY,JSON.stringify(contacts));
     },[contacts]);

      return (
    
     <div className="">
     <Router>
     <Header/> 


     <Routes> 
       <Route 
        exact  path="/" 
       render={(props)=>(
       <ContactList
       {...props} 
       contacts={contacts} 
       getContactId={removeContactHandler}
               />
               )}
               />

       <Route  exact  path="/add" 
       render={(props)=>(
        <AddContact {...props} addContactHandler={addContactHandler}
                />
                )}
                />



        {/* <Route exact path="/add" element= {<AddContact 
                    addContactHandler={addContactHandler}/>}/>

        <Route 
        exact  path="/" 
        element={
        <ContactList 
        contacts={contacts} 
        getContactId={removeContactHandler}/>}/> */}

        </Routes>
   
       </Router> 
        </div>
      
     
       );
       }

      export default App;

     2.This is my AddContact.js
      It consists of basic form submit methods using states.
     -----------------------------------------------------------------------------
        
     class AddContact extends React.Component{

      state={
      name:"",
      email:"",
       };

      add=(e)=>{
      e.preventDefault();
      if(this.state.name==="" || this.state.email===""){
      alert("All the input fields are empty!");
         return;
      }
      this.props.addContactHandler(this.state);
      this.setState({name:"",email:""});
   
       }
      render(){
      return(
      <>
     
       <form className="form-group" onSubmit={this.add}>
       <div className="column">
       <label for="name">Full Name</label>
       <input 
       type="text" 
       className="form-control" 
       id="fullname" 
       placeholder="Full Name"
       onChange={(e)=>this.setState({name:e.target.value})}/>
        </div>

       <div className="form-group ">
       <label for="email">Email address</label>
       <input 
       type="email"
       className="form-control" 
       id="email" 
       aria-describedby="emailHelp" 
       placeholder="Enter email"
       onChange={(e)=>this.setState({email:e.target.value})}/>
        </div>
       <br/>
       <button type="submit" className="btn btn-primary">Submit</button>
       </form>

       </>
        )
         }
         }

         export default AddContact

      -----------------------------------------------------------------

      3.This is my ContactList.js
       ---------------------------------------------------------------
        
      const ContactList = (props) => {
      console.log(props);

      const deleteContactHandler=(id)=>{
      props.getContactId(id);
       };
  
       const renderContactList = props.contacts.map((contact)=>{
          return(
            <ContactCard 
            contact={contact} 
            clickHandler={deleteContactHandler}
             key={contact.id}/>
          )
       })
      return (
      <>
      <br/>
      <div className=''>
      <h2>Contact List</h2>
      <Link to="/add">
      <button className='btn btn-warning mb-2'>Add Contacts</button>
      </Link>
      
      {renderContactList}
      </div>
      </>
       )
       }

      export default ContactList;

       -----------------------------------------------------------