Post data through form in react using simple react hooks

I am trying to post data from a form using react hooks and in my opinion, I have done everything right but the data is not showing. Can anyone explain to me why my data is not showing? My codes for AddProject.jsx, ProjectItems.jsx and ProjectForm.jsx are as follows:

ProjectForm.jsx

import React, {useState} from 'react'
import DatePicker from 'react-datepicker'
import "react-datepicker/dist/react-datepicker.css";



const ProjectForm = (props) => {
       

    const [selectedDate, setSelectedDate] = useState("")
    const [newDate, setNewDate] = useState("")
    const [values, setValues] = useState({
        projectName: "",
        address: "",
        description: "",
        features: "",
        technology: "",
       
    }
    )
    const [amount, setAmount] = useState("")
    const { addProject} = props;
    
    const handleChange = (e) => {
        setValues((values) => ({
            ...values,
            
          [e.target.name]: e.target.value,
        }));
      };
    
    const onDatePostedChange = (date) => {
       setSelectedDate(date)
    }

    
    const onDateCompletionChange = (date) => {
        setNewDate(date)
    }

    const onAmountChange = (e) => {
        const amount = e.target.value;
        if (!amount || amount.match(/^\d{1,}(\.\d{0,2})?$/)) {
            setAmount(amount)
         }

    }

    const handleSubmit = (e) => {
        e.preventDefault();
        addProject(values, selectedDate, newDate,amount)
        setSelectedDate("");
        setNewDate("");
        setAmount("");
        setValues({
            projectName: "",
            address: "",
            description: "",
            features: "",
            technology: ""

        });
       

        
    }
    return (
        <div>
           
            <form onSubmit = {handleSubmit}>
                <div>
                    <label htmlFor="projectName">Project Name:</label>
                    <input type="text"
                            name = "projectName"
                        required
                        value={values.projectName}
                        onChange = {handleChange}
                    />
                </div>
                <div>
                    <label htmlFor="datePosted">DatePosted:</label>
                    <DatePicker
                        className = "datepicker"
                        selected={selectedDate}
                        onChange={onDatePostedChange}
                        required
                        name = "datePosted"
                    />
                </div>
                <div>
                    <label htmlFor="address">Address:</label>
                    <input type="text"
                        name = "address"
                        required
                        value={values.address}
                        onChange = {handleChange}
                    />
                </div>
                <div>
                    <label htmlFor="description">Description:</label>
                    <textarea
                        required
                        rows="6"
                        name="description"
                        value={values.description}
                        onChange = {handleChange}
                    >
                    </textarea>
          
                </div>
                <div>
                    <label htmlFor="features">Features:</label>
                    <textarea
                        required
                        rows="6"
                        name="features"
                        value={values.features}
                        onChange = {handleChange}
                    >
                    </textarea>
                </div>
              <div>
                    <label htmlFor="tech">Technologies to be used(Tech Stack):</label>
                    <textarea
                        rows="6"
                        required
                        name="technology"
                        value={values.technology}
                        onChange = {handleChange}
                    >
                    </textarea>
                </div>
                <div>
                    <label htmlFor="time">Expected date to complete:</label>
                    <DatePicker
                        className="datepicker"
                        selected={newDate}
                        onChange={onDateCompletionChange}
                        required
                        name = "dateCompleted"
                    />
                </div>
                <div>
                    <label htmlFor="amount">Amount willing to pay:</label>
                    <input
                        type="text"
                        required
                        name="amount"
                        value={amount}
                        onChange={onAmountChange}
                    />
                </div>
                <button type = "submit">Add Project</Button>
                </form>
                
        </div>
    )
}
export default ProjectForm

ProjectItems.jsx

import React from 'react'

const ProjectItems = (props) => {
    const { projects } = props;
    return (
        <div >
            {projects.map((project) => (
                <div>
                    <p>{project.projectName}</p>
                    <p>{project.datePosted}</p>
                    <p>{project.description}</p>
                    <p>{project.address}</p>
                    <p>{project.features}</p>
                    <p>{project.technology}</p>
                    <p>{project.dateCompleted}</p>
                    <p>{project.amount }</p>
                    
                </div>
          ))}
            </div>
  )
}

export default ProjectItems

AddProject.jsx

 import React, {useState} from 'react'
    import ProjectForm from './Form/ProjectForm'
    import ProjectItems from './ProjectItems/ProjectItems'
 
    const AddProject = () => {
      const [projects, updateProjects] = useState([])
    
      const addProject = (project) => {
        updateProjects([...projects, project])
       
      }
      // console.log(projects);
      return (
       
        <div>
          <h1>Add Project of Your Choice:</h1>
          <ProjectForm addProject={addProject} />
          <ProjectItems projects = {projects} />
          </div>
          
      )
    }
    
    export default AddProject

I want to know where have I done wrong so that my data is not showing as everything seems right to me? I would be ever grateful if someone would help me out.I really need to know if some mistake is there.