How to use the @mui-treasury/styles/menuItem/toggle/material.useMaterialToggleMenuItemStyles 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 JupiterNestedMenuList = () => {
  const nestedStyles = useJupiterNestedMenuListStyles();
  const infoStyles = useMaterialInfoMenuItemStyles();
  const toggleStyles = useMaterialToggleMenuItemStyles();
  return (
    
       ({
          children: data.label,
          className: cx(
            toggleStyles.root,
            expanded && toggleStyles.expanded,
            nestedStyles.menuItem
          ),

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