How to use the @pluginjs/styled.getHeight function in @pluginjs/styled

if (hasClass(this.classes.MEDIUMSIZE, this.$preview)) {
      removeClass(this.classes.MEDIUMSIZE, this.$preview)
    }
    if (hasClass(this.classes.BIGSIZE, this.$preview)) {
      removeClass(this.classes.BIGSIZE, this.$preview)
    }
    if (value === 'auto') { /* eslint-disable-line */
    } else if (value === '3:2') {
      addClass(this.classes.SMALLSIZE, this.$preview)
    } else if (value === '4:3') {
      addClass(this.classes.MEDIUMSIZE, this.$preview)
    } else if (value === '16:9') {
      addClass(this.classes.BIGSIZE, this.$preview)
    }
    if (this.is('loaded')) {
      this.videoApi.setSize(getWidth(this.$video), getHeight(this.$video))
    }
  }

if (this.options.containerSelector) {
      if (this.options.containerSelector === '>') {
        this.$container = children(this.element)[0]
      } else {
        this.$container = query(this.options.containerSelector, this.element)
      }
      this.$wrap = this.element

      if (position === 'static') {
        setStyle('position', 'relative', this.$wrap)
      }
    } else {
      this.$wrap = wrap('<div></div>', this.element)
      this.$container = this.element
      this.$wrap.style.height =
        getHeight(this.element) &gt;= 0 ? `${getHeight(this.element)}px` : '0px'

      if (position !== 'static') {
        setStyle('position', position, this.$wrap)
      } else {
        setStyle('position', 'relative', this.$wrap)
      }
    }

    if (this.options.contentSelector) {
      if (this.options.contentSelector === '&gt;') {
        this.$content = children(this.$container)[0]
      } else {
        this.$content = query(this.options.contentSelector, this.$container)
      }
    } else {
      wrap('<div></div>', this.$container)

resize() {
    if (!this.is('disabled')) {
      this.width = getWidth(this.element)
      this.height = getHeight(this.element)

      this.adjust(this.position)
    }
  }
}

initLayout(direction) {
    if (direction === 'vertical') {
      setStyle('height', getHeight(this.$wrap), this.$container)
    } else {
      setStyle('width', getWidth(this.$wrap), this.$container)
    }

    const attributes = this.attributes[direction]
    const container = this.$container

    const parentLength = container.parentNode[attributes.crossClientLength]
    const scrollbarWidth = this.getBrowserScrollbarWidth(direction)

    setStyle(attributes.crossLength, parentLength, this.$content)
    setStyle(
      attributes.crossLength,
      scrollbarWidth + parentLength,
      this.$container
    )

let row = index - column * 2

    if (column > numFullColumns || (column === numFullColumns && row === 1)) {
      row += 1
      if (row >= 2) {
        row = 0
        column += 1
      }
    }

    if (row === 0) {
      this.firstRowHeight = getHeight(item)
    }

    if (row === 1) {
      this.secondRowHeight = getHeight(item)
      const columnHeight =
        this.firstRowHeight + this.gutter + this.secondRowHeight

      this.virtualHeight = Math.max(this.virtualHeight, columnHeight)
      this.firstRowHeight = 0
      this.secondRowHeight = 0
    }

    setStyle(
      {
        'margin-top': row !== 0 && this.gutter && `${this.gutter}px`
      },
      item
    )
  }

        .map(item => getHeight(item))
        .sort()

initialize() {
    this.animationGroup = SyncAnimation.of().createAnimationGroup(
      anime => anime.pause(),
      anime => anime.play()
    )
    this.joinSyncAnimationGroup = anime => this.animationGroup.push(anime)
    this.elementHeight = getHeight(this.element)
    this.instance.switchWord()
    this.childrens = Array.from(this.element.children)
    this.widthList = this.getWidthList(this.element)
    this.setPosition()

    setStyle('height', this.elementHeight, this.element)

    this.DOWNTOMID = [this.elementHeight, 0]
    this.MIDTOUP = [0, this.elementHeight * -1]
    this.totalDuration = this.options.duration * this.childrens.length
  }