🐛 [open-formulieren/open-forms#4699] Only render AddressNL component …

…when not hidden

The AddressNL component should only be rendered when it's not hidden. Otherwise, the attach function will call `createRoot` with an argument that isn't a DOM element.

So the creating of the root and, therefor, the rendering of the React component cannot be done.
If the reactRoot doesn't exist, then it also doesn't (and cannot) be unmounted. So this is also something that shouldn't happen when the component is hidden.

This works fine when the component is hidden/shown using form logic, as the `hidden` property will be updated.

src/formio/components/AddressNL.jsx

@@ -100,14 +100,16 @@ export default class AddressNL extends Field {
       addressNLContainer: 'single',
     });
     return super.attach(element).then(() => {
-      this.reactRoot = createRoot(this.refs.addressNLContainer);
-      this.renderReact();
+      if (!this.component?.hidden) {
+        this.reactRoot = createRoot(this.refs.addressNLContainer);
+        this.renderReact();
+      }
     });
   }
 
   destroy() {
     const container = this.refs.addressNLContainer;
-    if (container) this.reactRoot.unmount();
+    if (!this.component?.hidden && container) this.reactRoot.unmount();
     super.destroy();
   }
 
@@ -146,6 +148,9 @@ export default class AddressNL extends Field {
   }
 
   renderReact() {
+    if (this.component?.hidden) {
+      return;
+    }
     const required = this.component?.validate?.required || false;
     const initialValues = {...AddressNL.emptyValue, ...this.dataValue};