Controller receiving outdated state

[noahw3]

I'm attempting to use form context in two child components. These child components are conditionally rendered. The parent component where the form is created can also reset this state. However, what I'm seeing is that the value returned from Controller's field.value on the render prop becomes outdated and frozen when the child being rendered switches. Yet, if I check the state with getValues in the same child component it is correctly updated.

I created a codesandbox with a (relatively) minimal reproduction. I already pared this back a significant amount, it's still a bit chunky and a bit messy though. https://codesandbox.io/p/devbox/sldq7t

In this demo, whenever the first select value is changed, the second select should reset its value. This works when you've selected the same type of element. However once you've chosen a value in the second select and then re-select a different type in the first one, the controller's state is out of sync with the overall form state. This can be observed by the state no longer getting reset, and I've added some console logs to demonstrate this.

I'm almost certainly using the context or controllers wrong and would appreciate any pointers in the right direction.