Javascript – React component not re-rendering

I have a react code where I am facing an issue which is related to nested components in the react.

code

The issue is that I have a parent component named testing which contains two children component named Component1 and Component2, Inside the Component2 there sub children present named Component 3.

Now in Component1 I am performing an api call which is fetching the a list of products and that data is saved inside a useState present inside the testing parent component and the value of that useState is passed as prop in Component2 and from that to component3.

Here in Component3 I have useState that is stored a flag now when again I hit the api and the data is changed from that api call response, then the flag present inside the Component3 is not resetting as the components are not re-rendering, and just the data is getting change.

You can also use this codesandbox link to know more about the issue.

My question here is that when the useState present inside the parent component (testing) is updated then the nested component should also be re-rendered.
But the component3 is not re-rendering.

Please explain the full logic behind this in terms of VDom and RDom as well as how props are passed and executed when states are changed.