Реактивный компонент не рендерится

Question

Существует пользовательский <Select /> реагирующий компонент, который содержит 4 опции - 4 уровня тревоги:

1. Критический
2. Большой
3. Минорный
4. Предупреждение

Компонент <Select /> используется несколько раз.При каждом нажатии кнопки add new создается новый <Select />.

Предполагается, что компонент <Select /> имеет только один из своих активных параметров ввремя. НапримерМожно отобразить <Select /> -с только с 1 критическим, 1 основным, 1 второстепенным и 1 предупреждающим значением, но не двумя одновременно.При нажатии кнопки добавления нового для создания нового <Select /> он автоматически выбирает доступную опцию с наименьшим индексом.(см. приведенный выше список для индексов: 1-4)

Новые созданные <Select /> имеют значения, которые <Select />, созданные до них, имеют ОТКЛЮЧЕНО (unclickable)

Проблема:

Новые <Select /> работы, как и планировалось, напр.3-й компонент создан, его первый и второй параметры отключены.Но первый компонент имеет все доступные параметры и активен , что совершенно неверно.Предполагалось отключить его второй и третий параметры. Компоненты «не отрендеренные последними» не изменяются при изменении состояния.Поскольку они не проходят проверку Виртуального DOM, реакция не видит изменений в DOM, поэтому не переопределяет этот компонент.

Методы, которые я пробовал:

1. добавление пустого элемента в компонент <Select /> и изменение его идентификатора / класса с каждым новым <Select />, добавляемым на страницу, так что реагирующий видит, что идентификатор изменяется, и перерисовывает его
2. forceUpdate ()
3. написание функции, которая вручную изменяет состояние перерисовки компонента (почти так же, как forceUpdate ())

Как создать компонентывизуализировались раньше новых, чтобы увидеть изменения, которые они вносят и перерисовывают?

По сути, код является усовершенствованной версией этого кода, поэтому не счел необходимым добавить его полностью здесь.

<select>
  <option class="1" value="Critical">critical</option>
  <option class="2" value="Minor">major</option>
  <option class="3" value="Minor">minor</option>
  <option class="4" value="Warning">warning</option>
</select>