Mantine Tree initialization

[anshiksf]

I am using mantine tree inside a dropdown. I am using jotai's atom to store the selections. Everytime the dropdown reopens the state of the nodes become uncheck and also clear outs the atom data. Following is the code for a tree:

`const BusinessModelSelection = ({ treeData }: IProps) => {
const [isSelectAll, setIsSelectAll] = useState(false);
const [tier] = useAtom(selectedTierAtom);
const [getCheckedNodes] = useAtom(checkedNodesAtom);
const [units, setUnits] = useAtom(selectedUnitsAtom);

const selectedUnits = useMemo(
() => getSelectedUnits(treeData, getCheckedNodes),
[getCheckedNodes],
);

useEffect(() => {
if (!isObjectEmpty(selectedUnits)) {
setUnits(selectedUnits);
}
}, [selectedUnits]);

const handleSelectAll = () => {
setIsSelectAll(prev => !prev);
};

if (!tier || !treeData) return null;

return (
<>

<Checkbox
checked={isSelectAll}
color={isSelectAll ? colors.primary.absolute : colors.primary.white}
onClick={handleSelectAll}
/>
Select All

<Tree
data={treeData}
expandOnClick={false}
renderNode={({
elementProps,
expanded,
hasChildren,
node,
tree,
level,
selected,
}) => {
return (

);
}}
/>
</>
);
};`

Code for the tree node:
`const BusinessModelNode = ({
node,
hasChildren,
elementProps,
tree,
}: RenderTreeNodePayload) => {
const [getCheckedNodes, setCheckedNodes] = useAtom(checkedNodesAtom);

const checked = tree.isNodeChecked(node.value);
const indeterminate = tree.isNodeIndeterminate(node.value);

useEffect(() => {
tree.setSelectedState(getCheckedNodes?.map(node => node.value));
}, [getCheckedNodes]);

useEffect(() => {
setCheckedNodes(tree.getCheckedNodes());
}, [tree.checkedState]);

const handleNodeChange = useCallback(() => {
if (checked) {
tree.uncheckNode(node.value);
} else {
tree.checkNode(node.value);
}
}, [checked]);

return (
<Group {...elementProps}>
<div
className="flex gap-[10px] p-2 w-full border-b border-body-100"
style={{ borderBottom: 1px solid ${colors.body[100]} }}
>
<Checkbox
checked={checked}
indeterminate={indeterminate}
color={
checked
? colors.primary.absolute
: indeterminate
? colors.primary.absolute
: colors.primary.white
}
onClick={handleNodeChange}
/>

    <Group
      className="cursor"
      onClick={() => {
        if (!hasChildren) return;
        tree.toggleExpanded(node.value);
      }}
    >
      <SemiBold12 color={colors.body[800]}>{node.label}</SemiBold12>
    </Group>
  </div>
</Group>

);
};`

How I can save selections and also during initiailization from api how to initialize nodes with the selected ones.