TreeFall1

Проверка с помощью атрибута pattern срабатывает непосредственно перед отправкой формы. Кроме того, это не запретит ввод символов, отличных от цифр, а лишь покажет уведомление в случае несоответствия. Вашу же задачу можно решить несколькими способами.
Первый вариант: <input type="number" />. Из особенностей: он допускает ввод некоторых символов, отличающихся от цифр (например, "+" и "e").
Второй вариант: перехватывать событие onChange у поля ввода:

const [value, setValue] = useState('')

const handleInputChange = (e) => {
  setValue(e.target.value.replace(/\D/g, ''))
}

<input value={value} onChange={handleInputChange} />

Такие вещи можно решить полностью на CSS.
Делается скрытый checkbox, его label стилизуется в виде нужной кнопки, а как мы знаем, чекбокс срабатывает даже при клике на его label. И потом при помощи селектора ".toggle:checked + .lbl-toggle + .collapsible-content" запускаем анимацию, когда checkbox устанавливается в значение checked



P.S. Учите HTML и CSS и вам зачастую не нужно будет использовать Javascript, который последнее время пихают везде: и куда нужно, и куда совершенно противопоказано.

Ключ должен быть у самого верхнего элемента внутри цикла. В вашем случае это fragment:

<React.Fragment key={category}>
 <h2>...</h2>
 <ul>...</ul>
</React.Fragment>

forEach заменить на map

Как создать свой элемент для каждого элемента из массива?

Но в итоге ничего не создается

А че forEach() возвращает что то? Может map()?