When should i assign independent states to child functions(using hooks) in react?

I am making a small project in react which has three child components

1. a form to input data and later that data is posted to server
2. Another form to input a key and later fetch its corresponding value from server
3. Live Display of current data present on server

As of now i have declared all the states required in this project in a function which is a parent of all the functions mentioned above.

I believe i can also declare relevant states separately in child functions independently instead of declaring them in their common parent and the project would work fine .

So ,my question is

what should be the right approach to declare states in above example project ? OR like what is the correct approach in designing architecture for states in general ?