Создайте динамические c поля с помощью реакции

Question

Я использую приложение create-response-app

У меня есть следующие поля:

<div className="flex flex-col md:flex-row pb-4 mb-4">
                            <div className="w-64 font-bold h-6 mx-2 mt-3 text-gray-800">Datos de contacto
                            <div><button type="button" className="mr-3 text-sm bg-blue-500 hover:bg-blue-700 text-white py-1 px-5 rounded focus:outline-none focus:shadow-outline">+</button></div>
                        </div>
                            <div className="border-b border-gray-200">
                                <div className="flex flex-col md:flex-row">
                                    <div className="w-full  mx-2">
                                        <div className="my-2 p-1 bg-white flex border border-gray-200 rounded">
                                            <input 
                                            placeholder="Nombre del contacto" 
                                            name="nombre"
                                            value={nombre}
                                            onChange={onChange}
                                            className="p-1 px-2 appearance-none outline-none w-full text-gray-800 " /> </div>
                                    </div>
                                    <div className="w-full  mx-2">
                                        <div className="my-2 p-1 bg-white flex border border-gray-200 rounded">
                                            <input 
                                            placeholder="Email" 
                                            name="email" 
                                            value={email}
                                            onChange={onChange}
                                            className="p-1 px-2 appearance-none outline-none w-full text-gray-800 " /> </div>
                                    </div>
                                    <div className="w-full  mx-2">
                                        <div className="my-2 p-1 bg-white flex border border-gray-200 rounded">
                                            <input 
                                            placeholder="Teléfono" 
                                            name="telefono" 
                                            value={telefono}
                                            onChange={onChange}
                                            className="p-1 px-2 appearance-none outline-none w-full text-gray-800 " /> </div>
                                    </div>
                                    <div className="w-full  mx-2">
                                        <div className="my-2 p-1 bg-white flex border border-gray-200 rounded">
                                            <input 
                                            placeholder="Área o Sector" 
                                            name="area"
                                            value={area}
                                            onChange={onChange}
                                            className="p-1 px-2 appearance-none outline-none w-full text-gray-800 " /> </div>
                                    </div>
                                    <div className="w-full mx-2 flex items-center justify-center">
                                        <button type="button" 
                                        className="text-sm bg-red-500 hover:bg-red-700 text-white py-1 px-2 rounded focus:outline-none focus:shadow-outline">Eliminar</button>
                                    </div>
                                </div>

                            </div>

(см. Знак «плюс» (+)) Изображение кода результат на экране

И я управляю состоянием компонента, чтобы получить значения полей следующим образом:

  // State Inicial
    const [datosContacto, setdatosContacto] = useState({
        nombre: '', 
        email: '', 
        telefono: '', 
        area: ''
    });

    const {nombre, email, telefono, area} = datosContacto;

    const onChange = (e) => {

        setdatosContacto({
            ...datosContacto,
            [e.target.name]: e.target.value
        }
        )
    }

Как я могу создать эти поля снова (и бесконечно) нажатием кнопки «+»?

При нажатии кнопки «удалить» у вас должна быть ссылка на удаление полей (не только значения, но и сами поля, «код html») .

А также мне нужна ссылка на «имя» каждого входа для обработки состояния с помощью setState, но я понятия не имею, как это сделать динамически.

Большое спасибо!