id of a specific react material tree-item - reactjs

Question

I am using React Material TreeView, i am trying to create a route link that when i press on a TreeItem i can see it's specific details in the Outlet, but i dont know how to pass that ID of That specific item to the Outlet.
VesselComponents.js :
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { fetchComponents } from "../../../features/componentsSlice";
import TreeItem from "#mui/lab/TreeItem";
import TreeView from "#mui/lab/TreeView";
import ExpandMoreIcon from "#mui/icons-material/ExpandMore";
import ChevronRightIcon from "#mui/icons-material/ChevronRight";
import { Link, Outlet } from "react-router-dom";
function VesselComponents() {
const { components, error, loading } = useSelector(
(state) => state.components
);
console.log(components);
const dispatch = useDispatch();
useEffect(() => {
fetchComponents()(dispatch);
}, [dispatch]);
const getTreeItemsFromData = (treeItems) => {
return treeItems.map((treeItemData) => {
let children = undefined;
if (treeItemData.children && treeItemData.children.length > 0) {
children = getTreeItemsFromData(treeItemData.children);
}
return (
<TreeItem
key={treeItemData.id}
nodeId={String(treeItemData.id)}
label={treeItemData.name}
children={children}
/>
);
});
};
const DataTreeView = ({ treeItems }) => {
return (
<TreeView
defaultCollapseIcon={<ExpandMoreIcon />}
defaultExpandIcon={<ChevronRightIcon />}
>
{getTreeItemsFromData(treeItems)}
</TreeView>
);
};
return (
<div className="components-container">
<div className="components-items">
{/* this line */}
<Link to={`./info/${components.id}`}>
<DataTreeView treeItems={components} />
</Link>
</div>
<div className="component-detail">
<Outlet />
</div>
</div>
);
}
export default VesselComponents;