Search query not working, Expand/Collapse not functioning after dragging at nodes, and Button actions not working

I'm facing a couple of issues while using react-sortable-tree in my Next js project: using "react-sortable-tree": "^2.7.1", version

Search query not working: The search functionality is not returning expected results. When I search for a node, no matching nodes are highlighted or returned.


Expand/Collapse issue after dragging nodes: After dragging nodes from one place to another, the expand/collapse functionality doesn't work on the node level. The nodes remain expanded or collapsed, and I cannot toggle them properly after moving. at node level expand and collapse and buttons as well.

I created a new node configuration and moved to under contact:



please find below my code can any one help to resolve this.

import React, { useEffect, useState } from 'react';
import dynamic from 'next/dynamic';
import { FaPlus, FaChevronDown, FaChevronUp, FaSearch } from 'react-icons/fa';

const SortableTree = dynamic(() => import('react-sortable-tree'), { ssr: false });
import 'react-sortable-tree/style.css';

interface TreeNode {
title: string;
expanded?: boolean;
children?: TreeNode[];
}

const Tree = () => {
const [treeData, setTreeData] = useState([]);
const [newNodeTitle, setNewNodeTitle] = useState('');
const [searchText, setSearchText] = useState('');
const [matchedNodeIds, setMatchedNodeIds] = useState([]);

useEffect(() => {
setTreeData([
{
title: 'Profile',
expanded: true,
children: [
{ title: 'Official' },
{ title: 'Contact' },
{ title: 'License/Passport' },
{ title: 'Education' },
{ title: 'Family' },
],
},
{
title: 'Time Tracking',
expanded: false,
children: [{ title: 'Timesheet Entry' }],
},
]);
}, []);

/*** Expand All Nodes ***/
const expandAll = () => {
const updatedTree = treeData.map((node) => ({
...node,
expanded: true,
children: node.children ? node.children.map((child) => ({ ...child, expanded: true })) : [],
}));
setTreeData(updatedTree);
};

/*** Collapse All Nodes ***/
const collapseAll = () => {
const updatedTree = treeData.map((node) => ({
...node,
expanded: false,
children: node.children ? node.children.map((child) => ({ ...child, expanded: false })) : [],
}));
setTreeData(updatedTree);
};

/*** Add a new node to the main tree ***/
const addNode = () => {
if (newNodeTitle.trim() === '') return;
setTreeData([...treeData, { title: newNodeTitle, expanded: false }]);
setNewNodeTitle('');
};

/*** Search Node in the Tree ***/
const handleSearch = (e: React.ChangeEvent) => {
const query = e.target.value;
setSearchText(query);

};

return (

export default Tree;