How to use the @jupyterlab/filebrowser.FileBrowser function in @jupyterlab/filebrowser

editorServices,
    factoryOptions: {
      name: 'Editor',
      modelName: 'text',
      fileTypes: ['*'],
      defaultFor: ['*'],
      preferKernel: false,
      canStartKernel: true
    }
  });
  docRegistry.addWidgetFactory(wFactory);

  let commands = new CommandRegistry();

  let fbModel = new FileBrowserModel({ manager: docManager });
  let fbWidget = new FileBrowser({
    id: 'filebrowser',
    model: fbModel
  });

  // Add a creator toolbar item.
  let creator = new ToolbarButton({
    iconClassName: 'jp-AddIcon jp-Icon jp-Icon-16',
    onClick: () => {
      docManager
        .newUntitled({
          type: 'file',
          path: fbModel.path
        })
        .then(model => {
          docManager.open(model.path);
        });

widget.id = `google-drive-manager-${++id}`;
      }
      if (!widget.isAttached) {
        app.shell.addToMainArea(widget);
      }
      app.shell.activateById(widget.id);
    }
  };
  let documentManager = new DocumentManager({
    registry,
    manager: serviceManager,
    opener,
    realtimeServices: realtime
  });
  let fbModel = new FileBrowserModel({manager: serviceManager});
  let fbWidget = new FileBrowser({
    commands: commands,
    manager: documentManager,
    model: fbModel
  });

  // Add the file browser widget to the application restorer
  restorer.add(fbWidget, NAMESPACE);

  // Restore the state of the file browser on reload.
  const key = `${NAMESPACE}:cwd`;
  let connect = () => {
    // Save the subsequent state of the file browser in the state database.
    fbModel.pathChanged.connect((sender, args) => {
      state.save(key, { path: args.newValue });
    });
  };

const createFileBrowser = (
    id: string,
    options: IFileBrowserFactory.IOptions = {}
  ) => {
    const model = new FileBrowserModel({
      manager: docManager,
      driveName: options.driveName || '',
      refreshInterval: options.refreshInterval,
      state: options.state === null ? null : options.state || state
    });
    const widget = new FileBrowser({
      id,
      model,
      commands: options.commands || commands
    });
    const { registry } = docManager;

    // Add a launcher toolbar item.
    let launcher = new ToolbarButton({
      iconClassName: 'jp-AddIcon jp-Icon jp-Icon-16',
      onClick: () => {
        return createLauncher(commands, widget);
      },
      tooltip: 'New Launcher'
    });
    widget.toolbar.insertItem(0, 'launch', launcher);

modelName: 'text',
      fileTypes: ['*'],
      defaultFor: ['*'],
      preferKernel: false,
      canStartKernel: true
    }
  });
  docRegistry.addWidgetFactory(wFactory);

  let commands = new CommandRegistry();

  let fbModel = new FileBrowserModel({
    manager: docManager,
    iconRegistry: defaultIconRegistry
  });
  let fbWidget = new FileBrowser({
    id: 'filebrowser',
    model: fbModel
  });

  // Add a creator toolbar item.
  let creator = new ToolbarButton({
    iconClassName: 'jp-AddIcon jp-Icon jp-Icon-16',
    onClick: () => {
      void docManager
        .newUntitled({
          type: 'file',
          path: fbModel.path
        })
        .then(model => {
          docManager.open(model.path);
        });

const createFileBrowser = (
    id: string,
    options: IFileBrowserFactory.IOptions = {}
  ) => {
    const model = new FileBrowserModel({
      manager: docManager,
      driveName: options.driveName || '',
      refreshInterval: options.refreshInterval,
      state: options.state === null ? null : options.state || state
    });
    const widget = new FileBrowser({
      id,
      model
    });

    // Add a launcher toolbar item.
    let launcher = new ToolbarButton({
      iconClassName: 'jp-AddIcon',
      onClick: () => {
        return Private.createLauncher(commands, widget);
      },
      tooltip: 'New Launcher'
    });
    widget.toolbar.insertItem(0, 'launch', launcher);

    // Track the newly created file browser.
    void tracker.add(widget);

createFileBrowser(id: string, options: IFileBrowserFactory.IOptions = {}): FileBrowser {
      const model = new FileBrowserModel({
        manager: docManager,
        driveName: options.driveName || '',
        state: options.state === null ? null : options.state || state
      });
      const widget = new FileBrowser({
        id, model, commands: options.commands || commands
      });
      const { registry } = docManager;

      // Add a launcher toolbar item.
      let launcher = new ToolbarButton({
        className: 'jp-AddIcon',
        onClick: () => {
          return commands.execute('launcher:create', {
            cwd: widget.model.path
          });
        }
      });
      launcher.addClass('jp-MaterialIcon');
      widget.toolbar.insertItem(0, 'launch', launcher);

const createFileBrowser = (
    id: string,
    options: IFileBrowserFactory.IOptions = {}
  ) => {
    const model = new FileBrowserModel({
      manager: docManager,
      driveName: options.driveName || '',
      refreshInterval: options.refreshInterval,
      state: options.state === null ? null : options.state || state
    });
    const widget = new FileBrowser({
      id,
      model
    });

    // Add a launcher toolbar item.
    let launcher = new ToolbarButton({
      iconClassName: 'jp-AddIcon',
      onClick: () => {
        return Private.createLauncher(commands, widget);
      },
      tooltip: 'New Launcher'
    });
    widget.toolbar.insertItem(0, 'launch', launcher);

    // Track the newly created file browser.
    void tracker.add(widget);

open: (widget: Widget) => {
        console.log(widget);
      }
    }
    let docRegistry = new DocumentRegistry();
    this.docManager = new DocumentManager({
      registry: docRegistry,
      manager: this.props.serviceManager,
      opener
    });

    let fbModel = new FileBrowserModel({
      manager: this.docManager,
    });
    fbModel.cd(this.state.currentPath);
    this.fileBrowser = new FileBrowser({
      id: 'filebrowser',
      model: fbModel
    });

    fbModel.pathChanged.connect(this.pathChanged);
  }