Intento crear un componente de barra lateral en React y tengo una estructura de datos como la siguiente

 const links = [ { label: 'Item-1', url: '/item-1', }, { label: 'Item-2', children: [ { label: 'Item-2-1', url: '/item-2-1', }, { label: 'Item-2-2', url: '/item-2-2', }, { label: 'Item-2-3', url: '/item-2-3', }, ], }, { label: 'Item-3', children: [ { label: 'Item-3-1', url: '/item-3-1', }, { label: 'Item-3-2', url: '/item-3-2', }, ], }, ];

Entonces, el problema es que digamos que el usuario cambió la URL y la URL algo así como http://localhost:90/item-2-3 .

Y necesito activar este elemento de la barra lateral desde la barra lateral y se puede anidar. Entonces, primero necesito desactivar todos los demás elementos de la barra lateral (no quiero múltiples elementos seleccionados en la barra lateral) y luego activar el elemento de la barra lateral seleccionado.

Porque eso (si estoy en lo correcto) necesito actualizar todos los elementos del árbol, digamos que agrego active:false a todo JSON y luego necesito encontrar el elemento de árbol correcto del árbol (URL === elemento-2-3) agregue active:true y también actualice todos los padres json a active:true (porque hay un aspecto seleccionado/abierto)

Entonces, mi pregunta es: ¿estoy en lo correcto si corrijo cómo puedo escribir este código de manera óptima? :/

En realidad, quiero crear una función y cuando llamo a esta función como selectItemFromTree(links, '/item-2-2') obtengo resultados como a continuación.

 const links = [ { label: 'Item-1', url: '/item-1', active: false }, { label: 'Item-2', active: true, children: [ { label: 'Item-2-1', url: '/item-2-1', active: false }, { label: 'Item-2-2', url: '/item-2-2', active: true, }, { label: 'Item-2-3', url: '/item-2-3', active: false }, ], }, { label: 'Item-3', active: false, children: [ { label: 'Item-3-1', url: '/item-3-1', active: false }, { label: 'Item-3-2', url: '/item-3-2', active: false }, ], }, ];