[SimpleGrid] Visibility property setter does not update its own value

[ldv-orbyta]

Describe the bug 📝

What happened?

When I set the grid.visible property as false the grid disappears in my UI but the property does not update its own value.

This is the code of my angular component

The setup method

this.grid = this.grids.create(this.world);

My toggle method

  toggleGrid() {
    if (this.grid) {
      this.grid.visible = !this.grid.visible;
    }
  }

When I log in the console the value it prints always true, also when the grid is not visible in the UI...
Probably the setter works properly to hide the grid in the UI but not to update its own value.

https://github.com/ThatOpen/engine_components/blob/main/packages/core/src/core/Grids/src/simple-grid.ts
Below the code of the library

  /** {@link Hideable.visible} */
  set visible(visible: boolean) {
    if (visible) {
      const scene = this.world.scene.three;
      scene.add(this.three);
    } else {
      this.three.removeFromParent();
    }
  }

Version

^2.2.0

Reproduction ▶️

No response

Steps to reproduce 🔢

No response

System Info 💻

Microsoft Edge for Business
Scopri di più su Microsoft Edge for Business
Versione 128.0.2739.67 (Build ufficiale) (64 bit)

Used Package Manager 📦

npm

Error Trace/Logs 📃

No response

Validations ✅

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a repository issue and not a framework-specific issue. For example, if it's a THREE.js related bug, it should likely be reported to mrdoob/threejs instead.
• Check that this is a concrete bug. For Q&A join our Community.
• The provided reproduction is a minimal reproducible example of the bug.