Я не могу использовать значение по умолчанию или значение элемента React Select при использовании состояния redux для параметров и значения по умолчанию

Question

Я пытаюсь динамически установить параметры поля выбора и значение по умолчанию как последнее созданное значение. У меня это работает функционально, но я хотел бы избавиться от предупреждающего сообщения React, которое ругает меня за настройку, выбранную на уровне параметров.

index. js: 1 Предупреждение: используйте defaultValue или value props вместо настройки selected on.

Моя текущая реализация включает получение как «списка» параметров, так и «targetClassId» от редуктора. Я использую список, чтобы установить параметры выбора, а затем устанавливаю для параметра selected prop значение true, когда labelClass.id совпадает с targetClassId.

const UnityLabeler = () => {
  const { list, targetClassId } = useSelector((state) => state.labelClasses);
  const dispatch = useDispatch();

  ...

  const handleSnapshot = () => {
    const labelClass = _.find(list, ['id', targetClassId]);
    takeSnapshot(targetClassId, labelClass.name);
  };

  const handleChange = (e) => {
    dispatch(changeTargetClass(parseInt(e.target.value)));
  };

  const LabelClassOptions = () => {
    return list.map((labelclass) => {
      return (
        <option
          value={labelclass.id}
          key={labelclass.id}
          selected={targetClassId === labelclass.id}
        >
          {labelclass.name}
        </option>
      );
    });
  };

  return (
    <div className="unity-labeler">
      <div className="panel--round">
        <span className="panel--round__header">Select an Object</span>
        <div className="panel--round__body">
          <div className="flex-row-container flex-wrap">
            <div className="form-controls flex-column-container">
              <span>
                <label>Class:</label>
                <Select id="target-label-class" onChange={handleChange}>
                  <LabelClassOptions />
                </Select>
              </span>
              <SnapShotButton
                handleSnapshot={handleSnapshot}
                disabled={list.length === 0}
              />
            </div>
            <div className="unity-container">
              <UnityWorld build={build} url={url} />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default UnityLabeler;

Если я делаю это, устанавливая значение select или значение по умолчанию с состоянием targetClassId ничего не происходит. Может ли это быть ситуация, когда параметры отображаются после того, как у меня есть новый targetClassId? Если да, то как мне это предотвратить? Есть ли другой способ установить целевое значение, не выполняя прямых манипуляций с DOM?

// This doesn't work

<Select id="target-label-class" onChange={handleChange} value={targetClassId} defaultValue={targetClassId}>
  <LabelClassOptions />
</Select>