Когда работаешь с React.jS использовать document.queryselector вместо ref, есть большой ошибкой?

Всем привет.
У меня есть родитель в нем import несколько компонентов input, кроме как через document.queryselectorall не могу знать как достать все значению value.

Одно могу получиться передав от родителя функцию с аргументом, которую вызову в компоненте input и передам value, вот пример:
https://stackblitz.com/edit/ls?file=Input.js

Вот, что прочитал из доки:
В редких случаях, вы можете захотеть получать доступ к DOM-элементам потомков из родительского компонента. Как правило, это не рекомендуется, так как разрушает инкапсуляцию компонента.

Подскажите пожалуйста как получить все поля inputs методами reactjs.
Спасибо.

В проекте используется решение для глобального state management (типа redux или mobx)? Если да - что задачу нужно решать через него (чтобы инпуты складывали свои значения в глобальный стейт, а кому надо - приходил туда и забирал значения).

Тогда аккуратненько получить ref, прикопать и использовать только для чтения из DOM-а. Концептуально это решение неверное, но с точки зрения простоты - самое то.

И будь очень аккуратен. Как только тебе понадобится “следить” за изменениями полей, решение сразу же будет усложняться. Тогда лучше вынести стейт менеджмент из компонент во вне.

В этом и проблема, что необходимо использовать только React.JS)

Спасибо, за помощь!