How to use the openseadragon function in openseadragon

componentDidMount() {
    const { osdConfig, viewer } = this.props;
    if (!this.ref.current) {
      return;
    }

    this.viewer = new OpenSeadragon({
      id: this.ref.current.id,
      ...osdConfig,
    });

    this.osdCanvasOverlay = new OpenSeadragonCanvasOverlay(this.viewer);
    this.viewer.addHandler('update-viewport', this.onUpdateViewport);
    // Set a flag when OSD starts animating (so that viewer updates are not used)
    this.viewer.addHandler('animation-start', () => {
      this.osdUpdating = true;
    });
    this.viewer.addHandler('animation-finish', this.onViewportChange);
    this.viewer.addHandler('animation-finish', () => {
      this.osdUpdating = false;
    });

    this.updateCanvas = this.canvasUpdateCallback();

mounted() {
            this.viewer = OpenSeadragon({
                id: "osd_viewer",
                // need to change this to use the images in the node module
                prefixUrl: "https://cdn.jsdelivr.net/npm/openseadragon@2.4/build/openseadragon/images/",
                sequenceMode: false,
                tileSources: []
            });
        }
    }

componentDidMount() {
    this.setStrings();

    if (typeof window.OpenSeadragon !== 'undefined') {
      OPENSEADRAGONVIEWER = window.OpenSeadragon(this._config());
    } else {
      OPENSEADRAGONVIEWER = OpenSeadragon(this._config());
    }
    // Start at the image specified in the URL
    OPENSEADRAGONVIEWER.goToPage(this.props.currentPageId);
  }

initOpenSeaDragon = () => {
    const { id, container, pages, renderError, updateContextState } = this.props

    // Detect browser vendor
    this.browser = getKeyByValue(OpenSeaDragon.BROWSERS, OpenSeaDragon.Browser.vendor)

    // Create viewer
    this.viewer = OpenSeaDragon({
      element: this.OSDContainer.current,
      tileSources: pages[0],
      ...OSDConfig,
    })

    // Events handler
    this.viewer.addHandler('open', () => {
      this.renderLayout()
      this.fitBounds()

      // Prevent unessesart context updates
      if (renderError) {
        updateContextState({ renderError: false })
      }
    })

componentDidMount() {
    const {getRef, onImageLoaded, tileSource} = this.props;
    if (!tileSource) {
      console.error('Something went wrong, we cannot display the open sea dragon');
      this.setState({ fallback: true });
      return;
    }
    this.setState({ fallback: false });
    this.viewer = new OpenSeadragon({
      element: this.element,
      ajaxWithCredentials: false,
      showNavigator: true,
      showRotationControl: true,
      defaultZoomLevel: 0,
      maxZoomPixelRatio: 1,
      navigatorPosition: 'BOTTOM_RIGHT',
      animationTime: 0.3,
      immediateRender: true,
      preserveViewport: true,
      blendTime: 0.1,
      minPixelRatio: 0.5,
      visibilityRatio: 0.65,
      constrainDuringPan: false,
      showSequenceControl: false,
      showNavigationControl: false,

componentDidMount() {
    const { getRef, onImageLoaded, tileSources, osdOptions } = this.props;
    if (!tileSources) {
      console.error(
        'Something went wrong, we cannot display the open sea dragon'
      );
      this.setState({ fallback: true });
      return;
    }
    this.setState({ fallback: false });
    this.viewer = new OpenSeadragon({
      element: this.element,
      ajaxWithCredentials: false,
      showNavigator: true,
      showRotationControl: true,
      defaultZoomLevel: 0,
      maxZoomPixelRatio: 1,
      navigatorPosition: 'BOTTOM_RIGHT',
      animationTime: 0.3,
      immediateRender: true,
      preserveViewport: true,
      blendTime: 0.1,
      minPixelRatio: 0.5,
      visibilityRatio: 0.65,
      minZoomImageRatio: 1,
      constrainDuringPan: false,
      showSequenceControl: false,

initSeaDragon(){
      OpenSeadragon(this._config())
    }

.then(response => {
        const osdViewer = openseadragon({
          id: `image-viewer-${viewerId}`,
          showNavigationControl: false,
          visibilityRatio: 1,
          tileSources: [
            {
              '@context': 'http://iiif.io/api/image/2/context.json',
              '@id': response['@id'],
              height: response.height,
              width: response.width,
              profile: ['http://iiif.io/api/image/2/level2.json'],
              protocol: 'http://iiif.io/api/image',
              tiles: [
                {
                  scaleFactors: [1, 2, 4, 8, 16, 32],
                  width: 400,
                },

.then(data => {
          const { imageId, setViewer, setImageParams } = this.props;
          if (!data.Format) {
            this.props.setLoadError(true);
          } else {
            this.props.setLoadError(false);
            setImageParams({
              height: Number(data.Height),
              width: Number(data.Width),
              overlap: Number(data.Overlap),
              tileSize: Number(data.TileSize),
            });
            const viewer = OpenSeadragon({
              id: 'osd1',
              prefixUrl:
                'https://cdn.jsdelivr.net/npm/openseadragon@2.3/build/openseadragon/images/',
              visibilityRatio: 1,
              minLevel: 0,
              maxLevel: 14,
              showNavigator: true,
              tileSources: {
                height: Number(data.Height),
                width: Number(data.Width),
                tileSize: Number(data.TileSize),
                overlap: Number(data.Overlap),
                getTileUrl: (level, x, y) => {
                  return `${SLIDE_IMAGE_ENDPOINT}${imageId}?level=${level}&x=${x}&y=${y}`;
                },
              },