How to use the classnames/dedupe function in classnames

export function getClassNames( html, existingClassNames = '', allowResponsive = true ) {
	if ( ! allowResponsive ) {
		// Remove all of the aspect ratio related class names.
		const aspectRatioClassNames = {
			'wp-has-aspect-ratio': false,
		};
		for ( let ratioIndex = 0; ratioIndex < ASPECT_RATIOS.length; ratioIndex++ ) {
			const aspectRatioToRemove = ASPECT_RATIOS[ ratioIndex ];
			aspectRatioClassNames[ aspectRatioToRemove.className ] = false;
		}
		return classnames(
			existingClassNames,
			aspectRatioClassNames
		);
	}

	const previewDocument = document.implementation.createHTMLDocument( '' );
	previewDocument.body.innerHTML = html;
	const iframe = previewDocument.body.querySelector( 'iframe' );

	// If we have a fixed aspect iframe, and it's a responsive embed block.
	if ( iframe && iframe.height && iframe.width ) {
		const aspectRatio = ( iframe.width / iframe.height ).toFixed( 2 );
		// Given the actual aspect ratio, find the widest ratio to support it.
		for ( let ratioIndex = 0; ratioIndex < ASPECT_RATIOS.length; ratioIndex++ ) {
			const potentialRatio = ASPECT_RATIOS[ ratioIndex ];
			if ( aspectRatio >= potentialRatio.ratio ) {

render() {
        const {
            tagName,
            text,
            icon,
            iconPosition,
            hideText,
            url,
            target,
            rel,
            size,
            focusOutlineWeight,
            focusOutlineColor,
        } = this.props.attributes;

        let className = classnames(
            'ghostkit-button',
            size ? `ghostkit-button-${ size }` : '',
            hideText ? 'ghostkit-button-icon-only' : ''
        );

        // focus outline
        if ( focusOutlineWeight && focusOutlineColor ) {
            className = classnames( className, 'ghostkit-button-with-outline' );
        }

        className = applyFilters( 'ghostkit.blocks.className', className, {
            ...{
                name,
            },
            ...this.props,
        } );

tabs_getRoutedItem(props = {}, tab) {
    const attributes = Util.omit(props, ["classNames"]);
    let badge = null;
    const notificationCount = NotificationStore.getNotificationCount(tab);
    const hasNotification = notificationCount > 0;
    const tabLabelClasses = classNames(
      "menu-tabbed-item-label",
      { "badge-container": hasNotification },
      props.classNames
    );
    const textClasses = classNames("menu-tabbed-item-label-text", {
      "badge-container-text": hasNotification
    });

    if (hasNotification) {
      badge = {notificationCount};
    }

    return (
      
        <span>{this.tabs_tabs[tab]}</span>
        {badge}

getServicesLink(key) {
    const minorLinkClasses = classNames(
      "text-overflow service-link",
      this.props.minorLinkClassName
    );

    const minorLinkAnchorClasses = classNames(
      "table-cell-link-secondary",
      this.props.minorLinkAnchorClassName
    );

    return (
      <div>
        <div>
          </div></div>

render() {
        const {
            heading,
            active,
            slug,
        } = this.props.attributes;

        let className = classnames(
            'ghostkit-accordion-item',
            active ? 'ghostkit-accordion-item-active' : ''
        );

        className = applyFilters( 'ghostkit.blocks.className', className, {
            ...{
                name,
            },
            ...this.props,
        } );

        return (
            <div>
                <a href="{">
                    </a></div>

render({
           'class': className,
           permanent,
           open,
           children,
           ...props
         }, state) {
    let classes = classnames({
      'mdc-permanent-drawer': permanent,
      'mdc-temporary-drawer': !permanent,
      'mdc-temporary-drawer--animating': !permanent,
      'mdc-temporary-drawer--open': !permanent && open
    }, className);
    if (permanent) {
      return (
        <div class="{classes}">
          {children}
        </div>
      );
    } else {
      return (
        <aside class="{classes}">
          <div class="mdc-temporary-drawer__drawer">{children}</div>
        </aside>

{...attributes}
            contentEditable={true}
            onBlur={this.handleContentEditableBlur}
            onFocus={this.handleContentEditableFocus}
            onInput={this.handleContentEditableChange}
            style={{minHeight: `${minHeight}px`}} />
        
      );
    } else {
      inputContent = (
        <span>
          <span>
            {value || attributes.startValue}
          </span>
          <span>
            
          </span>
        </span>
      );
    }

    if (renderer) {
      return renderer(inputContent);
    }

    return inputContent;
  }

render() {
    const {
      className,
      majorLinkClassName,
      minorLinkWrapperClassName
    } = this.props;

    const classes = classNames("nested-service-links", className);

    const majorLinkClasses = classNames("text-overflow", majorLinkClassName);

    const minorLinkWrapperClasses = classNames(
      "table-cell-details-secondary flex",
      "flex-align-items-center table-cell-flex-box",
      minorLinkWrapperClassName
    );

    return (
      <div>
        <div>{this.getMajorLink()}</div>
        <div>{this.getMinorLinks()}</div>
      </div>
    );
  }

render({
           'class': className,
           children,
           ...props
         }, state, context) {
    const classes = classnames('mdc-card__horizontal-block', className);
    return (
      <div class="{classes}">{children}</div>
    );
  }
}

render() {
    const {
      children,
      className,
      detailViewHeaderContentWrapperClassNames,
      detailViewHeaderContentHeadingClassNames,
      navigationTabs
    } = this.props;

    const detailViewHeaderClasses = classNames(
      "detail-view-header flex-item-shrink-0",
      { "has-tabs": !!navigationTabs },
      className
    );

    const detailViewHeaderContentWrapperClasses = classNames(
      "detail-view-header-content-wrapper",
      detailViewHeaderContentWrapperClassNames
    );

    const detailViewHeaderContentHeadingClasses = classNames(
      "detail-view-header-content-heading",
      detailViewHeaderContentHeadingClassNames
    );

    return (
      <div>
        <div>
          <div>
            <div>
              {this.getIcon()}
              <div>{this.getTitle()}</div></div></div></div></div>