How to use the codesandbox-api.registerFrame function in codesandbox-api

handleMessage = (data: any, source: any) => {
    if (data && data.codesandbox) {
      if (data.type === 'initialized' && source) {
        registerFrame(
          source,
          this.serverPreview
            ? getSSEUrl(this.props.sandbox.id)
            : frameUrl(this.props.sandbox.id)
        );

        if (!this.state.frameInitialized && this.props.onInitialized) {
          this.disposeInitializer = this.props.onInitialized(this);
        }

        setTimeout(() => {
          // We show a screenshot of the sandbox (if available) on top of the preview if the frame
          // hasn't loaded yet
          this.setState({ showScreenshot: false });
        }, this.serverPreview ? 0 : 600);

this.listener = listen((message: any) => {
      switch (message.type) {
        case 'initialized': {
          if (this.iframe) {
            if (this.iframe.contentWindow) {
              registerFrame(this.iframe.contentWindow, this.bundlerURL);

              if (this.options.fileResolver) {
                this.fileResolverProtocol = new Protocol(
                  'file-resolver',
                  async (data: { m: 'isFile' | 'readFile'; p: string }) => {
                    if (data.m === 'isFile') {
                      return this.options.fileResolver!.isFile(data.p);
                    }

                    return this.options.fileResolver!.readFile(data.p);
                  },
                  this.iframe.contentWindow
                );
              }
            }