Ось ще один приклад з життя (максимально спрощений)

🗒 Маємо компонент який тримає в собі стейт моделі і керує діалогом з формою. Модель виконана у вигляді масиву об'єктів із value в середині, методу оновлення стейту немає взагалі.

export default function App() {
  const [isOpen, setIsOpen] = useState(false);
  const [fields] = useState([{ value: "test" }]);
  const closeDialog = () => setIsOpen(false);
  const openDialog = () => setIsOpen(true);

  return (
    <>
      <button onClick={openDialog}>Open edit dialog</button>
      <dialog open={isOpen}>
        <Form initialFields={fields} onCancel={closeDialog} />
      </dialog>
    </>
  );
}

🗒 Маємо другий компонент - форму, яка, приймає початкові дані і тримає їх у власному, окремому, стейті. На формі є кнопка з типом reset, яка при натисканні очищує форму та закриває діалог.

function Form({ initialFields, onCancel }) {
  const [fields, setFields] = useState(initialFields);
  const setField = (e, field) => {
    field.value = e.target.value;
    setFields([...fields]);
  };
  return (
    <form>
      {fields.map((field, i) => (
        <input key={i} value={field.value} onChange={(e) => setField(e, field)} />
      ))}
      <button type="reset" onClick={onCancel}>
        Cancel
      </button>
    </form>
  );
}

Проблема (вибачте, виклик!) полягає в тому, що, якщо ви відредагуєте поле і закриєте форму, а потім її знову відкриєте, то побачити внесені зміни. Незважаючи на reset і не зважаючи що метод setFields батьківскього компоненту взагалі не існує.

❓В задачі питається: де баг і що треба зробити з розробником цієї диверсії ❓

П.С. Дякую пану Ярославу за наведений приклад.