useEffect不是由子组件的ref.current更改触发的

我创建了一个弹出窗口，用户可以使用该弹出窗口向应用程序中添加内容，每个字段都是一个单独的组件，因为我需要在不同配置的多个位置重复使用它们。

我尝试创建一个innerRef当更改（即键入新值）时，如果所有值均有效，useEffect则应触发该组件的Done按钮以显示或隐藏按钮。

我知道valid我分配给prop的所有值是否有效.current

export default function AddStock() {
  const selectTypeOfQuantityRef = useRef({});
  const [allValid, setAllValid] = useState(false);

  useEffect(() => {
    const allValues = [selectTypeOfQuantityRef.current.valid];

    allValues.every((value) => value) ? setAllValid(true) : setAllValid(false);
    console.log(allValues.every((value) => value)); // does not get triggered
  }, [selectTypeOfQuantityRef.current]);

return (
    <>
      <AddPopup>
        <SelectTypeOfQuantity innerRef={selectTypeOfQuantityRef} />
        {allValid && <DoneButton/>}
        <CancelButton/>
      </AddPopup>
    </>
  );
}

这就是选择本身（当然是习惯），它会在状态改变时设置innerRef。这里的一切正常，这个小组件本身的状态可以正确管理，但不会触发父组件的状态更新

export default function SelectTypeOfQuantity({ defaultValue = null, innerRef }) {
  const [selectTypeOfQuantity, setSelectTypeOfQuantity] = useState(defaultValue);
  const [valid, setValid] = useState(false);
  const [errMessage, setErrMessage] = useState("Избери стойност!");

  useEffect(() => {
    innerRef.current.value = selectTypeOfQuantity;
    handleValidation(selectTypeOfQuantity);
  }, [selectTypeOfQuantity]);

  const handleValidation = (value) => {
    const result = validateAutocomplete(value);
    if (result.valid) {
      setValid(true);
      setErrMessage(null);
      innerRef.current.valid = result.valid;
    } else {
      setValid(false);
      setErrMessage(result.errMessage);
    }
  };

  const selectTypeOfQuantityOnChange = (e, val) => {
    setSelectTypeOfQuantity(val ? val.value : null);
  };

  return (
    <Select onChange={selectTypeOfQuantityOnChange}/>
  );
}