No optimization for rerendering when a global state is hooked via nested state

I’m trying to build a “form management” library, that allows to structure the form fields in deeply nested objects like this:

{
  "field1": {
    "id": "field1",
    "label": "Label for field1",
    "value": "Initial value for field1"
  },
  "field2": {
    "id": "field2",
    "label": "Label for field2",
    "value": "Initial value for field2"
  },
  "section": {
    "field1": {
      "id": "section.field1",
      "label": "Label for section.field1",
      "value": "Initial value for section.field1"
    }
  }
}

The form fields themselves are complex objects, too.

Forms are composed by specifying a name attribute on the field components, e.g. <Field name="deeply.nested.sub.field" />. Because state.nested("deeply.nested.sub.field") is not supported, I wrote a function to split that property path and then iteratively call nested on all parts.

When I edit “section.field1” it seems to work, but when I edit “field1” the “section.field1” component also receives an update. You can find the code here: https://codesandbox.io/s/stupefied-joliot-mkkhl?file=/src/App.tsx

[avkonst]

verified in your sandbox and in unit tests

[avkonst]

your usecase is fully supported with with hookstate 3.0.12 version