Checkbox selection in the Table

[NaNtagonist]

Describe the bug 📝

We are creating BIM viewer web application, where we have Settings section (panel).
Settings section has worldsTable from CUI.tables.worldsConfiguration
The table is shown correctly when compiling, all inputs and checkboxes work fine, but wether I change Panel section onto another or toggle worldsTable tree or even scroll down the Table - all the input values set into default states

import * as BUI from "@thatopen/ui";
import * as CUI from "@thatopen/ui-obc";
import Compass from '../../icons/mdi--compass.svg'
import Laptop from '../../icons/majesticons--laptop.svg'
import Moon from '../../icons/solar--moon-bold.svg'
import Sun from '../../icons/solar--sun-bold.svg'
import Color from '../../icons/eva--color-palette-fill.svg'
import World from '../../icons/tabler--world.svg'
import Expand from '../../icons/eva--expand-fill.svg'
import {Button, Checkbox, Select, Slider} from "antd";
import {observer} from "mobx-react-lite";
import Search from "antd/es/input/Search";
import {useEffect, useRef, useState} from "react";
import { useStore } from "../../stores/StoreProvider";

const Settings = observer(() => {
const store = useStore();
const [checkedEn, setCheckedEn] = useState(true);
const [checkedShow, setCheckedShow] = useState(true);
const [checkedRot, setCheckedRot] = useState(false);
const components = store.sceneStore.getComponents;
const map = store.sceneStore.getMap;
const html = document.querySelector("html")!;
const worldsTableRef = useRef(null);
useEffect(() => {
if(worldsTableRef.current && worldsTable instanceof HTMLElement)
worldsTableRef.current.appendChild(worldsTable)
}, []);
const onThemeChange = (value:number) => {
if (
value === undefined ||
value === null
) {
html.classList.remove("bim-ui-dark", "bim-ui-light");
} else if (value === 1) {
html.className = "bim-ui-light";
} else if (value === 2) {
html.className = "bim-ui-dark";
console.log(value)
}
};

const [worldsTable] = CUI.tables.worldsConfiguration({ components });
const mapSize = map.getSize();
const onWorldConfigSearch = (e:string) => {
worldsTable.queryString = e;
};
return (

<img height={"14px"} src={Color} alt="Color"/>

Цветовая тема

<Select
style={{width:"9em"}}
onChange={onThemeChange}
defaultValue={3}
options={[
{value:1, label:'Светлая'},
{value:2, label:'Темная'},
{value:3, label:'Системная'},
]}
>

<img height={"14px"} src={World} alt="World"/>

Миры

<div style={{display: "flex", gap: "0.375rem"}}>
<Search onSearch={(e)=>onWorldConfigSearch(e)} placeholder="Поиск...">
<Button style={{flex: 0}} onClick={() => (worldsTable.expanded = !worldsTable.expanded)}>
<img height={"14px"} src={Expand} alt="World"/>

<img height={"14px"} src={Compass} alt="Color"/>

Настройки миникарты

<Checkbox
checked={checkedEn}
onChange={(e) => {
setCheckedEn(e.target.checked);
map.enabled = e.target.checked;
}}>
Включить

<Checkbox
checked={checkedShow}
onChange={(e) => {
setCheckedShow(e.target.checked);
map.config.visible = e.target.checked;
}}>
Показать

<Checkbox
checked={checkedRot}
onChange={(e) => {
setCheckedRot(e.target.checked);
map.config.lockRotation = e.target.checked;
}}>
Фиксировать поворот

Приближение

<Slider
min={0.01}
max={0.5}
step={0.01}
defaultValue={map.zoom}
onChange={(e) => {
map.config.zoom = e;
}}
/>

Переднее смещение

<Slider
min={0}
max={5}
step={1}
defaultValue={map.frontOffset}
onChange={(e) => {
map.config.frontOffset = e;
}}
/>

Ширина

<Slider
min={100}
max={500}
step={10}
defaultValue={mapSize.x}
onChange={(e) => {
map.config.sizeX = e;
}}
/>

Высота

<Slider
min={100}
max={500}
step={10}
defaultValue={mapSize.y}
onChange={(e) => {
map.config.sizeY = e;
}}
/>

  </div>

)
});
export default Settings;

Reproduction ▶️

No response

Steps to reproduce 🔢

No response

System Info 💻

System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 Intel(R) Core(TM) i7-10700 CPU @ 2.90GHz
    Memory: 16.44 GB / 31.79 GB
  Binaries:
    Node: 22.14.0 - C:\Program Files\nodejs\node.EXE      
    npm: 10.9.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 10.10.0 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Edge: Chromium (135.0.3179.54)
    Internet Explorer: 11.0.19041.5794

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.