Folder upload using react

I am creating a project using react in which users can upload folder which includes sub folders and files,and the folder contents can be viewed after uploading on browser. I have a modal component as follows:

import { useState } from 'react';
import '../styles/modal.css';

function Modal(props) {

    const [formdata,setFormData]=useState({
        projectname:'',
        projectfolder:null,
        privacy:''
    })


    const handleProjectNameChange=(e)=>{
        setFormData({projectname:e.target.value})
    } 


    const handleProjectFolder=(e)=>{
        console.log(e.target.files[0])
        // setFormData({projectfolder:e.target.files[0]})
    } 

  return (
    <div className='modal-class'>
        <span id='close-btn' onClick={()=>props.setShowModal(!props.setShowModal)}>&times;</span>
        <label htmlFor="project-name">Project name</label>
        <input  type="text" 
                id='project-name' 
                onChange={handleProjectNameChange} 
                value={formdata.projectname}
                />
        <label className="custom-file-upload">
            Upload your folder
            <br/>
            <input type="file"
                onChange={handleProjectFolder} 
          
            />   
        </label>
        <div className='radio'>
            <label htmlFor="radio1">Public</label>
            <input type="radio"  id="radio1" name="privacy" value="Public"/>
        </div>
        <div className='radio'>
            <label htmlFor="radio2">Private</label>
            <input type="radio"  id="radio2" name="privacy" value="Private"/>
        </div>
        <button type="submit" className='upload-btn'>Upload</button>
    </div>
  )
}

export default Modal

How can I allow folder upload and show contents on browser?