Collapse node problem with next js

[Anonymous]

Node Collapse Problem

After integrating into next app node collapses after hitting check
2nd time attempts of expanding node makes checkbox uncheck again...

Getting checked or expanded values accurately

Codesandbox
This is how i tried to solve: Sandbox

Expected Output of this to get nodes exact value with checked

Node Object:

const nodes:any = [{
        value: 'mars',
        label: 'Mars',
        children: [
            { value: 'phobos', label: 'Phobos' },
            { value: 'deimos', label: 'Deimos' },
        ],
    }];

State controlling:

let [state, setState]:any = useState([{
        checked: [],
        expanded: [],
    }]);

Component placement:

<CheckboxTree
               nodes={nodes}
               iconsClass="fa5"
               optimisticToggle
               showExpandAll
               checked={state.checked}
               expanded={state.expanded}
               onExpand={expanded => setState((e)=>[...state, {expanded: e} ])}
               onCheck={checked => setState([(c)=> [...state, {checked: c}])}
/>

@ai @RusAlex @koszti @thespooler @karaxuna

[Jake Zatecky]

Your CodeSandbox example does not render the initial tree. When I modified it do to so, I noticed that you were losing the selected or checked state value by not merging with the previous state.

See my modification of your CodeSandbox here, which works as expected.