How to use the @bentley/ui-components.useModelSource function in @bentley/ui-components

const NavigationTree: React.FC = (props: NavigationTreeProps) => {
  const nodeLoader = usePresentationNodeLoader({
    imodel: props.iModelConnection,
    rulesetId: props.rulesetId,
    pageSize: 20,
  });
  const modelSource = useModelSource(nodeLoader)!;
  const eventHandler = React.useMemo(() => new TreeEventHandler({ modelSource, nodeLoader, collapsedChildrenDisposalEnabled: true }), [modelSource, nodeLoader]);
  const unifiedSelectionEventHandler = useControlledTreeUnifiedSelection(modelSource, eventHandler, nodeLoader.getDataProvider());
  const visibleNodes = useVisibleTreeNodes(modelSource);

  return (
    
  );
};

export function useControlledTreeFiltering(
  nodeLoader: ITreeNodeLoaderWithProvider,
  modelSource: TreeModelSource,
  filter: string | undefined,
  activeMatch?: number,
) {
  const {
    filteredNodeLoader,
    isFiltering,
    matchesCount,
  } = useFilteredNodeLoader(nodeLoader, filter);

  const filteredModelSource = useModelSource(filteredNodeLoader);
  const nodeHighlightingProps = useNodeHighlightingProps(filter, filteredNodeLoader, activeMatch);

  return {
    nodeHighlightingProps,
    filteredNodeLoader: filteredNodeLoader || nodeLoader,
    filteredModelSource: filteredModelSource || modelSource,
    isFiltering,
    matchesCount,
  };
}