How to use the @mui-treasury/styles/menuItem/info/material.useMaterialInfoMenuItemStyles function in @mui-treasury/styles

const ComponentMenuList = ({ menus, getOpenKeys }) => {
  const nestedStyles = useJupiterNestedMenuListStyles();
  const infoStyles = useMaterialInfoMenuItemStyles();
  const toggleStyles = useMaterialToggleMenuItemStyles();
  const { setOpened: setSidebarOpened } = useLayoutCtx();
  return (
    
      {({ location }) => {
        const paths = location.pathname.split('/');
        const lastPath = last(paths) || last(dropRight(paths));
        return (

const MaterialNestedMenuList = () => {
  const nestedStyles = useMaterialNestedMenuStyles();
  const actionToggleStyles = useMaterialActionToggleItemStyles();
  const infoStyles = useMaterialInfoMenuItemStyles();
  return (
    
       ({
          children: data.label,
          classes: actionToggleStyles,
          listItemProps: {
            className: nestedStyles.menuItem,
            classes: pick(infoStyles, ['root', 'focusVisible']),
          },

const JupiterNestedMenuList = () => {
  const nestedStyles = useJupiterNestedMenuListStyles();
  const infoStyles = useMaterialInfoMenuItemStyles();
  const toggleStyles = useMaterialToggleMenuItemStyles();
  return (
    
       ({
          children: data.label,
          className: cx(
            toggleStyles.root,
            expanded && toggleStyles.expanded,
            nestedStyles.menuItem

const MaterialInfoMenuItemDemo = () => {
  const styles = useMaterialInfoMenuItemStyles();
  return (
    
      {data.map(item => (
        
      ))}
    
  );
};

const MaterialCollapsibleMenuList = () => {
  const [selectedKey, setSelectedKey] = React.useState('');
  const actionStyles = useMaterialActionToggleItemStyles();
  const toggleStyles = useMaterialToggleMenuItemStyles();
  const infoStyles = useMaterialInfoMenuItemStyles();
  const extraStyles = useStyles();
  return (
    
       (
          
            Parent menu