Гибко настраиваемая форма с динамическим набором полей в React

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

Требования:

1. Реализуйте компонент DynamicForm, который поддерживает динамическое добавление и удаление полей ввода.
2. При загрузке формы должна быть уже присутствующая одна текстовая строка.
3. При нажатии на кнопку «Добавить поле» появляется новое текстовое поле.
4. Рядом с каждым полем размещается кнопка «Удалить», позволяющая удалить конкретное поле, если в форме больше одного.
5. Любое изменение любого из полей должно обновлять массив значений, хранящийся в useState, и выводить его в console.log.
6. Добавьте кнопку «Отправить», при клике по которой в консоль выводятся все текущие введённые данные.
7. Для отображения списка полей используйте useState и метод map().

import "./styles.css";

// Требования:
// 1. Создай компонент DynamicForm, который позволяет пользователю динамически добавлять и удалять поля ввода.
// 2. В начале форма должна содержать одно текстовое поле.
// 3. Пользователь может нажать кнопку "Добавить поле", чтобы добавить новое текстовое поле.
// 4. Возле каждого поля должна быть кнопка "Удалить", позволяющая удалить конкретное поле (если оно не единственное).
// 5. При изменении любого поля, обновлённый список значений должен храниться в useState и отображаться в console.log.
// 6. Добавь кнопку "Отправить", которая выведет в консоль все введённые данные.
// 7. Используй useState и map() для рендеринга динамического списка полей.

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}