i want to share this question. So, i have a form which is designed by react-bootstrap. And also use React Hooks and React Function Component. I have a form which is add new form and delete form but i don't do edit form. This is a return statement

return(
        
            
                
                

                    
                        Name
                        
                    
                    
                        Surname
                        
                    
                    
                        Email address
                        
                         Please, Enter like "asd@asd.com"
                    
                    
                        Comment
                        
                    
                    Submit
                
                
            
            
            {Formss}
        
    )

And then, These are the function of this return

const Formss = input.map((item , index) =>
        {
            return(
                
            )
        }
    )

const handleSubmit = (event) => {
        event.preventDefault();

        const name = firstname.current.value
        const surname = secondname.current.value
        const mail = email.current.value
        const mycomment = comment.current.value

        const data = {id:id(),
                    name : name,
                    surname : surname,
                    mail : mail,
                    mycomment : mycomment}
    
        if(data.name && data.surname && data.mail && data.mycomment){
            setInput([...input, data])
            firstname.current.value = ""
            secondname.current.value = ""
            email.current.value = ""
            comment.current.value =""
        }else{
            console.log("oopss")
        }
    }

I use ref hook for handleSubmit. So, How to add edit button and edit function?