React Hooks: App.js state changes and re-renders

This might be a trivial or baseless question but it is really important to know what's exactly going on as there is no good material or answers about this right now.

Basically, consider this simple example:

App.js

const [someState, setSomeState] = useState(0)
....
some more state variables and functions
....
<ContextWrapper someState={someState} someFunction={someFunction}>
    <Child1 />
    <Child2 />
</ContextWrapper>

ContextWrapper is basically another component which has a context which is widely used throughout the entire app components and returns this:

<DataContext.Provider value={{ values }}>{props.children}</DataContext.Provider>

Now, here are my questions:

1.) Every time I change any state of App, there is a re-render and ALL children are re-rendered too. This includes my ContextWrapper as well. Isn't this counter-intuitive? Am I doing it wrong and should the App component have no state so that no re-renders are triggered?

2.) Is there anything wrong in passing props to ContextWrapper?

3.) What are the performance implications of this and how can I stop multiple re-renders of the children components? Is it even necessary to do so or this isn't much of a big deal?

Thanks!