Update: found the solution. I pass the outletData in Root component to the following function that loops through all the inner objects until reaching the bottom and that's where the name of the child component rendered in Outlet is specified:
export const getOutletChildName = (outletData) => {
let childName;
if (outletData.hasOwnProperty('props') && outletData.props.hasOwnProperty('children')) {
return getOutletChildName(outletData.props.children);
} else {
childName = outletData.type.name;
}
return childName;
}
and now as I have the name of the component I can further work on permissions logic and then render either Outlet or some default "Not allowed" component. Thanks everyone who looked into this issue and I hope my solution can help somebody.