Use Menu gives error type is not assignable to type

Question

I want to be able to use the Menu from React Aria Adobe using Typescript and as per the documentation, however I keep getting an error of incompatible types on line:

 let state = useTreeState({...props, selectionMode: 'none'});

AND

let {menuProps} = useMenu(props, state, ref);

The error I get is:

Argument of type '{selectionMode:"none"; isVisbilible?:boolean; children?: React.ReactNode; dangerouslySetInnerHTML?:{...;}|undefined;...160more...;css?: InterpolationWithTheme<...>; is not assisgnable to parameter of type 'TreeProps'. Types of property children are incompatible. Type of 'ReactNode' and 'children' are not assignable to type 'CollectionChildren '

What can I change to not get this error?

interface ABCProps {
isTrue? :boolean;
//others...
}

import {useMenu, useMenuItem} from '@react-aria/menu';
import {useTreeState} from '@react-stately/tree';
import {Item} from '@react-stately/collections';
import {useFocus} from '@react-aria/interactions';
import {mergeProps} from '@react-aria/utils';

function Menu(props: AbcProps): React Element {
  // Create state based on the incoming props
  let state = useTreeState({...props, selectionMode: 'none'});

  // Get props for the menu element
  let ref = React.useRef();
  let {menuProps} = useMenu(props, state, ref);

  return (
    <ul
      {...menuProps}
      ref={ref}
      style={{
        padding: 0,
        listStyle: 'none',
        border: '1px solid gray',
        maxWidth: 250
      }}>
      {[...state.collection].map(item => (
        <MenuItem
          key={item.key}
          item={item}
          state={state}
          onAction={props.onAction} />
      ))}
    </ul>
  );
}

Answer 1

It's because your ABCProps has a different children type than what is accepted in useTreeState. Change it to CollectionChildren

import {useTreeState, CollectionChildren} from '@react-stately/tree';

interface ABCProps {
  isVisible?: boolean;
  //others...
  children?: CollectionChildren<any> 
}

Either use a generic to describe the shape of CollectionChildren, or just type it as children?: CollectionChildren<any>

type ABCProps<T> = {
  isVisible?: boolean;
  //others...
  children?: CollectionChildren<T>;
}

function Menu<T>(props: AbcProps<T>): JSX.Element {...}

More info about the accepted types is available at https://react-spectrum.adobe.com/react-stately/useTreeState.html