How to use the piral.useOnClickOutside function in piral

const [open, setOpen] = React.useState(false);
  const currentUser = useGlobalState(m => m.user);
  const menuItems = useGlobalState(m => m.components.menuItems);
  const itemNames = Object.keys(menuItems).filter(m => menuItems[m].settings.type === 'user');
  const container = React.useRef(undefined);
  const image = currentUser ? require('../images/male.png') : require('../images/female.png');
  const items = itemNames.length > 0 && (
    <>
      <li>
      {itemNames.map(name =&gt; {
        const Component = menuItems[name].component;
        return ;
      })}
    
  );
  useOnClickOutside(container, () =&gt; setOpen(false));

  return (
    <div open="">
      <div> setOpen(!open)}&gt;
        <img alt="Profile Image" src="{image}">
      </div>
      <ul>
        {currentUser ? (
          &lt;&gt;
            <li>
              <span>Name</span>
              {currentUser.firstName} {currentUser.lastName}
            </li>
            {items}
            <li>
            </li><li></li></ul></div></li>

const LanguagePickerView: React.FC = ({ selected, available }) => {
  const [open, setOpen] = React.useState(false);
  const [language, setLanguage] = useDynamicLanguage(selected, loadLanguage);
  const container = React.useRef();
  const translate = useTranslate();
  useOnClickOutside(container, () => setOpen(false));

  return (
    <div>
      <div> setOpen(!open)}&gt;
        
      </div>
      <ul>
        {available.map(lang =&gt; (
          <li> setLanguage(lang)}&gt;
             <span>{translate(lang)}</span>
          </li>
        ))}
      </ul>
    </div>
  );
};