有没有办法在React中迭代所有的子组件？

有没有办法在React中迭代所有的子组件？ 我有一个表单，看起来像这样。

<Form>
 <FormLine>
  <FormItem>
   <FormInput/>
  </FormItem>
  <FormItem>
   <FormInput/>
  </FormItem>
 </FormLine>
 <FormLine>
  <FormItem>
   <FormInput/>
  </FormItem>
  <FormItem>
   <FormInput/>
  </FormItem>
 </FormLine>
<input type="submit"/>
</Form>

表单组件看起来像这样。

export const Form = ({ info, error, success, children, wide, submit, onSubmit }) => {
    const { t } = useTranslation();
    const [ disabled, setDisabled ] = useState(true);

    useEffect(() => {
        if(!submit) return;
        const inputs = getChildrenByTypeDeep(children, ['FormInput']);
        if(inputs) {
            inputs.forEach(i => {
                console.dir(i);
                // I would like to check the values of the form fields somewhere here
            });
        }    
    }, [ children ]);

    return(
        <div className='Form'>
            {success && <div className='Form-success'>{t(success)}</div>}
            {error && <div className='Form-error'>{t(error)}</div>}
            {info && <div className='Form-info'>{t(info)}</div>}
            {children}
            {submit &&
            <input
                type='submit'
                value={t(submit)}
                disabled={disabled}
                onClick={onSubmit ? onSubmit : null}
            />}
        </div>
    );
};

我需要在启用FormSubmit组件之前检查所有FormInput组件是否有值。为了做到这一点，我希望能够检查Form组件内的所有子输入元素的值变化。 我已经尝试使用react-children-utilities和react-nanny包，但都没有找到Forms内的FormInput组件。有人能帮助解决这个问题吗？