Until now I've only used react-form-hook to manage my forms. but now I'm trying to build a form with more error handling than this field is required or minLenght/maxLength. each input has its own validation logic I have to check one by one before accepting the entered value.

I want to separate the inputs filed so each one has its validation logic and error handling but how do I link their states all together -whether valid or not- to the parent component (Form) in order to enable/disable the submit button?

Using Context API or a Redux/Zustand store means that I'm going to add a new piece of state to manage when the Form gets a new input or any other form element. I don't know if this would be what can be called an efficient solution. the same thing applies to lefting the states to the parent. By efficient I mean a solution that considers the rendering, performance and reusability