How can i show form values in a modal?

I'm trying to do a modal that shows the values previously submitted in a form. I´m using ReactJs.

This is my ContactForm.js: where i define the different inputs, validations and functions.

import React, {useState} from 'react'
import SubmitBtn from '../atoms/SubmitBtn';
import './ContactForm.css'
import './Modal.css'
import FormInput from '../molecules/FormInput'
import Modal from './Modal';


const ContactForm = () => {
  const [ isOpen, setIsOpen ] = useState(false)
  const [data, setData] = useState({
    key: '',
    value: ''
  })
  const [values, setValues ] = useState({
    name: '',
    lastname: '',
    email: '',
    confirmEmail: '',
    message: ''
  });

  const inputs = [
    {
      id: 1,
      name: 'name',
      type: 'text',
      placeholder: 'Name',
      required: true,
      pattern: '^[a-zA-Z]+$',
      errorMessage: 'Only letters are allowed '
    },
    {
      id: 2,
      name: 'lastname',
      type: 'text',
      placeholder: 'Last Name',
      required: true,
      pattern: '^[a-zA-Z]+$',
      errorMessage: 'Only letters are allowed '
    },
    {
      id: 3,
      name: 'email',
      type: 'email',
      placeholder: 'Email',
      required: true,
      errorMessage: 'Invalid email'
    },
    {
      id: 4,
      name: 'confirmEmail',
      type: 'email',
      placeholder: 'Confirm Email',
      required: true,
      pattern: values.email,
      errorMessage: 'Emails don´t match'

    },
    {
      id: 5,
      name: 'message',
      type: 'text',
      placeholder: 'Message',
      required: true,
      errorMessage: 'This field cannot be empty'
    }
  ]



    const handleSubmit = (e) => {
    const formData = new FormData(e.currentTarget)
    e.preventDefault();
    for( let [key, value] of formData.entries()){
      setData({
        key: key,
        value:value
      })
    }
    setIsOpen(true)
    
  }

  const handleClose = () =>{
    setIsOpen(false)
  }

  const onChange = (e) => {
    setValues({...values, [e.target.name]: e.target.value}); 
  }  

  return (
    <div>
      <Modal 
      open={isOpen} 
      handleClose={handleClose}
      data={data}      
      />
      
      <form className='contactForm' onSubmit={handleSubmit}>
        {inputs.map((input) => (
          <FormInput 
          key={input.id} 
          {...input} 
          value={values[input.name]} 
          onChange={onChange}
          />
        ))}
        <SubmitBtn handleSubmit={handleSubmit} />    
      </form>
    </div>
  )
}

export default ContactForm

FormInput.js: in here i show the different input fields and the errorMessage for each corresponding input field.

import React from 'react'
import './FormInput.css';
import { Input } from '../atoms/Input';
import ErrorSpan from '../atoms/ErrorSpan';

const FormInput = (props) => {

  const { id, onChange, errorMessage, ...inputProps } = props;

  return (
    <div className='formInput'>        
         <Input 
         {...inputProps} 
         onChange={onChange} 
         /> 

        <ErrorSpan 
        errorMessage={props.errorMessage}
        />        
    </div>
  )
}

export default FormInput

Modal.js: Up to now i only have a button that triggers a function that updates the value of isOpen to false again for the modal to be closed. And if the open variable is true, the component renders the modal. The thing is how can i bring my data submitted in my form and display it in this modal?

import React from 'react'

const Modal = ({ open, handleClose, data }) => {
  if(!open) return null

  return (
    <div className='wrapper'>
        <div className="modal-container">
            <div className="modal">
                <input>{data.key}</input>
                <button onClick={handleClose} >Close</button>
            </div>
        </div>
    </div>
  )
}

export default Modal

you should set the state properly, it will return the last element in the code provided . so change it like this

 const [data, setData] = useState([])
......

const handleSubmit = (e) => {
    const formData = new FormData(e.currentTarget)
    e.preventDefault();
let results = [];

    for( let [key, value] of formData.entries()){

   results.push({
        key: key,
        value:value
      })
    }  
    setData(results);
    
    setIsOpen(true)
    
  }