Child Component Not rendering in React

I’m trying to make a CV generator, and the input fields in the child component aren’t rendering.

The Parent Component:

import React, { useState } from 'react';

import WorkForm from './WorkForm';


export default function Work(){
    const [exp, setExp] = useState({
        jobArr : 
            [{company: "",
            startDate: "",
            endDate: "",
            description: "",
            id: Math.floor(Math.random() * 100)}],
        editMode: true,
})
    
      const handleSubmit = (e) => {
        e.preventDefault();
    
        setExp({ ...exp, editMode: false });
      };
      const handleEdit = (e) => {
        setExp({ ...exp, editMode: true });
      };

      const handleChange = (e) => {
        const {name, value, id} = e.target
        setExp((
            {editMode : true,
            jobArr : exp.jobArr.map(job =>{
            return job.id === id ? {...job, [name] : value} : job ;
            }) 
            }
        ))
      }

      const handleAdd = () => {
        setExp({editMode : true,
            jobArr : exp.jobArr.concat({company: "",
                startDate: "",
                endDate: "",
                description: "",
                id:Math.floor(Math.random() * 100)}),
      })
      };

      const handleDelete = (e) =>{
        const { id } = e.target
        setExp({
            editMode : true,
            jobArr: exp.jobArr.filter(job => job.id !== id )
        })
      }
    const editButton = <button onClick={handleEdit} className="edit-button">EDIT</button>;
    const submitButton = <button onClick={handleSubmit} className="submit-button">SUBMIT</button>;
    const addNewButton = <button onClick={handleAdd} className="add-new-button">ADD NEW</button>;

    const editContent = (
        <div className='edit-experience'>

            {exp.jobArr.map(job => {
                return <WorkForm 
                    handleChange = {handleChange}
                    handleDelete = {handleDelete}
                    company = {exp.company}
                    startDate = {exp.startDate}
                    endDate = {exp.startDate}
                    description = {exp.description}
                    id = {exp.id}
                    key = {exp.id}
                />
                })}
            {submitButton}
        </div>
    )

    const submittedContent = (
        <div>
            <h2>Work Experience</h2>
            {exp.jobArr.map(job => {
                return <div key = {job.id}>
                <h4>{job.company.toUpperCase()} </h4> <p> {job.startDate} to {job.endDate}</p>
                <p>{job.description}</p>
                </div>
            })}
        </div>
    )

    return(
        <>
            {!exp.editMode && editButton}
            {exp.editMode ? editContent : submittedContent}
            {exp.editMode && addNewButton}
        </>
    )
}

The Child Component :

import React, { useState } from 'react';


export default function WorkForm(props){
    <div>
            <form onSubmit={props.handleSubmit}>
                <input 
                    name = "company"
                    type = "text"
                    value = {props.company}
                    placeholder = "Enter Company Name"
                    onChange={props.handleChange}
                    id = {props.id} 
                />
                <br/>
                <input 
                    name = "startDate"
                    type = "month"
                    value = {props.startDate}
                    placeholder = "Enter Starting Date"
                    onChange={props.handleChange}
                    id = {props.id}
                />
                <input 
                    name = "endDate"
                    type = "month"
                    value = {props.endDate}
                    placeholder = "Enter Ending Date"
                    onChange={props.handleChange}
                    id = {props.id}
                />
                <br/>
                <textarea 
                    name="description" 
                    rows="4" 
                    cols="50"
                    value = {props.description}
                    placeholder= 'Describe your work experience'
                    onChange={props.handleChange}
                    id = {props.id}
                >
                </textarea>
                <br/><br/>
                <button onClick = {props.handle} className="delete-button">DELETE</button>
            </form>
        </div>
}

I’m not sure where I’m going wrong. I’m using Math.random to generate ID and using that as the keys for the list of children components, is that where I’m going wrong?