How to use the @jupyter-widgets/output.OutputView function in @jupyter-widgets/output

*
     * This causes the view to be destroyed as well with 'remove'
     */
    dispose() {
        if (this.isDisposed) {
            return;
        }
        super.dispose();
        if (this._view) {
            this._view.remove();
        }
        this._view = null;
    }
}

export class OutputView extends outputBase.OutputView {

    _createElement(tagName) {
        this.pWidget = new Panel()
        return this.pWidget.node;
    }

    _setElement(el) {
        if (this.el || el !== this.pWidget.node) {
            // Boxes don't allow setting the element beyond the initial creation.
            throw new Error('Cannot reset the DOM element.');
        }

        this.el = this.pWidget.node;
    }

    /**

*
     * This causes the view to be destroyed as well with 'remove'
     */
    dispose() {
        if (this.isDisposed) {
            return;
        }
        super.dispose();
        if (this._view) {
            this._view.remove();
        }
        this._view = null;
    }
}

export class OutputView extends outputBase.OutputView {

    _createElement(tagName) {
        this.pWidget = new JupyterPhosphorPanelWidget({ view: this });
        return this.pWidget.node;
    }

    _setElement(el) {
        if (this.el || el !== this.pWidget.node) {
            // Boxes don't allow setting the element beyond the initial creation.
            throw new Error('Cannot reset the DOM element.');
        }

        this.el = this.pWidget.node;
    }

    /**

dispose() {
        if (this.isDisposed) {
            return;
        }
        super.dispose();
        if (this._view) {
            this._view.remove();
        }
        this._view = null;
    }

    private _view: DOMWidgetView;
}

export
class OutputView extends outputBase.OutputView {

    _createElement(tagName: string) {
      this.pWidget = new JupyterPhosphorPanelWidget({ view: this });
      return this.pWidget.node;
    }

    _setElement(el: HTMLElement) {
        if (this.el || el !== this.pWidget.node) {
            // Boxes don't allow setting the element beyond the initial creation.
            throw new Error('Cannot reset the DOM element.');
        }

        this.el = this.pWidget.node;
        this.$el = $(this.pWidget.node);
     }

kernel.output_callback_overrides_push(msg_id, this.model_id);
        }
    },

    setOutputs: function(model, value, options) {
        if (!(options && options.newMessage)) {
            // fromJSON does not clear the existing output
            this.output_area.clear_output();
            // fromJSON does not copy the message, so we make a deep copy
            this.output_area.fromJSON(JSON.parse(JSON.stringify(this.get('outputs'))));
        }
    },

});

var OutputView = outputBase.OutputView.extend({
    render: function(){
        var that = this;
        this.el.classList.add('jupyter-widgets-output-area');
        outputArea.then(function(outputArea) {
            that.output_area = new outputArea.OutputArea({
                selector: that.el,
                // use default values for the output area config
                config: {data: {OutputArea: {}}},
                prompt_area: false,
                events: that.model.widget_manager.notebook.events,
                keyboard_manager: that.model.widget_manager.keyboard_manager });
            that.listenTo(that.model, 'new_message', function(msg) {
                that.output_area.handle_output(msg);
            }, that);
            that.listenTo(that.model, 'clear_output', function(msg) {
                that.output_area.handle_clear_output(msg);

*
   * This causes the view to be destroyed as well with 'remove'
   */
  dispose() {
    if (this.isDisposed) {
      return;
    }
    super.dispose();
    if (this._view) {
      this._view.remove();
    }
    this._view = null;
  }
}

export class OutputView extends outputBase.OutputView {
  _createElement(tagName) {
    this.pWidget = new Panel();
    return this.pWidget.node;
  }

  _setElement(el) {
    if (this.el || el !== this.pWidget.node) {
      // Boxes don't allow setting the element beyond the initial creation.
      throw new Error("Cannot reset the DOM element.");
    }

    this.el = this.pWidget.node;
  }

  /**
   * Called when view is rendered.

values: attributes.outputs,
            // Widgets (including this output widget) are only rendered in
            // trusted contexts
            trusted: true,
        });
    }

    get outputs() {
        return this._outputs;
    }

    private _outputs: OutputAreaModel;
    widget_manager: HTMLManager;
}

export class OutputView extends outputBase.OutputView {
    _createElement(tagName: string) {
        this.pWidget = new Panel();
        return this.pWidget.node;
    }

    _setElement(el: HTMLElement) {
        if (this.el || el !== this.pWidget.node) {
            // Boxes don't allow setting the element beyond the initial creation.
            throw new Error('Cannot reset the DOM element.');
        }
        this.el = this.pWidget.node;
        this.$el = $(this.pWidget.node)
    }

    render() {
        const manager = this.model.widget_manager;

initialize(attributes: any, options: any) {
    console.log(options);
    const { model_id } = options;
    const outputs = options.widget_manager.outputsByModelId(model_id);
    this.model_id = model_id;
    this._outputs = outputs;
    this.comm = options.comm;
    this.widget_manager = options.widget_manager;
  }

  callbacks() {
    return super.callbacks();
  }
}

export class OutputView extends output.OutputView {
  model: OutputModel;

  render() {
    ReactDOM.render(
      
        {this.model._outputs.map((output, key) => {
          console.log(output.toJS());
          return (
            <output>
              
              
            </output>
          );
        })}
      ,
      this.pWidget.node