How to use the dompurify.sanitize function in dompurify

let suffixText = option[this.labelSuffixName] || '';
                let optionLabel = option[this.optionLabel] || '';
                optionLabel = optionLabel.toString().replace(/\"/g, '\''); // replace double quotes by single quotes to avoid interfering with regular html
                // also translate prefix/suffix if enableTranslateLabel is true and text is a string
                prefixText = (this.enableTranslateLabel && prefixText && typeof prefixText === 'string') ? this.i18n.tr(prefixText || ' ') : prefixText;
                suffixText = (this.enableTranslateLabel && suffixText && typeof suffixText === 'string') ? this.i18n.tr(suffixText || ' ') : suffixText;
                optionLabel = (this.enableTranslateLabel && optionLabel && typeof optionLabel === 'string') ? this.i18n.tr(optionLabel || ' ') : optionLabel;
                // add to a temp array for joining purpose and filter out empty text
                const tmpOptionArray = [prefixText, labelText, suffixText].filter((text) => text);
                let optionText = tmpOptionArray.join(separatorBetweenLabels);
                // if user specifically wants to render html text, he needs to opt-in else it will stripped out by default
                // also, the 3rd party lib will saninitze any html code unless it's encoded, so we'll do that
                if (isRenderHtmlEnabled) {
                    // sanitize any unauthorized html tags like script and others
                    // for the remaining allowed tags we'll permit all attributes
                    const sanitizedText = DOMPurify.sanitize(optionText, sanitizedOptions);
                    optionText = htmlEncode(sanitizedText);
                }
                // html text of each select option
                options += `<option label="${optionLabel}" value="${option[this.valueName]}">${optionText}</option>`;
                // if there's a search term, we will add the "filled" class for styling purposes
                if (selected) {
                    this.isFilled = true;
                }
            });
        }

const classNames = [
      'label-container',
      ...this.props.className.split(' ')
    ]

    const style = {
      width: this.props.textAlign === 'center'
        ? '100%' : '',
      textAlign: this.props.textAlign
    }

    return(
      <div style="{style}">
        <p>
          { DOMPurify.sanitize(this.props.text) }
        </p>
      </div>
    )
  }
}

export const parse = (markdown?: string): TemplateResult => {
  if (!markdown) {
    return html`
      ${nothing}
    `;
  }

  return html`
    ${unsafeHTML(DOMPurify.sanitize(marked(markdown)))}
  `;
};

const renderFieldDescription = ( description ) => {
	return (
		description ?  : null
	);
};

export const renderObject = entry => {
  if (neo4j.isInt(entry)) return entry.toString()
  if (entry === null) return <em>null</em>
  return (
    
  )
}
const buildData = entries =&gt; {

new TagPermalinkFixWrapper(),
        new EntityPermalinkWrapper(),
        new SearchPermalinkWrapper(),
        new SpoilersWrapper(),
        new SmallWrapper(),
        new StrikeThroughWrapper(),
    ];
    for (let wrapper of wrappers) {
        text = wrapper.preprocess(text);
    }
    text = marked(text, options);
    wrappers.reverse();
    for (let wrapper of wrappers) {
        text = wrapper.postprocess(text);
    }
    return DOMPurify.sanitize(text);
}

function Appbar(props: AppbarProps) {
  const { config, menuAnchorEl, projectLogo, handleClose, handleMenu } = props;
  const classes = useStyles();

  React.useEffect(() => {
    document.title = (config?.title) || 'Nebraska';
  }, [config]);

  return (
    
      
        {config?.logo ? (
          
            <div>
          
        ) : (
          
        )}
        {config?.title &amp;&amp; (
          
            {config.title}
          
        )}
        <div style="{{">
        {config?.access_management_url &amp;&amp; (
          </div></div>

function updatePreview() {
            example.innerHTML = sanitize(editor.getValue(), {
                ADD_TAGS: ["tlp-relative-date"],
                ADD_ATTR: ["date", "absolute-date", "placement", "preference", "locale"],
            });
            var datepickers = example.querySelectorAll(".tlp-input-date");
            [].forEach.call(datepickers, function (datepicker) {
                datePicker(datepicker);
            });

            var filters = example.querySelectorAll(".tlp-search[data-target-table-id]");
            [].forEach.call(filters, function (filter) {
                filterInlineTable(filter);
            });

            select2(document.querySelector("#area-select2"), {
                placeholder: "Choose an area",
                allowClear: true,

function mempoolTableRow (tx) {
  const tbody = document.createElement('tbody')
  const link = `/tx/${tx.hash}`
  tbody.innerHTML = `
    
      ${humanize.hashElide(tx.hash, link)}
      ${copyIcon()}
      ${alertArea()}
    
    ${tx.Type}
    ${humanize.threeSigFigs(tx.total || 0, false, 8)}
    ${tx.size} B
    ${humanize.timeSince(tx.time)}
  `
  dompurify.sanitize(tbody, { IN_PLACE: true, FORBID_TAGS: ['svg', 'math'] })
  return tbody.firstChild
}

desc = p_output.join(', ')

        targetPath = NavigationHelpers.navigate(
          NavigationHelpers.generateUIDPath('explore', tile, 'phrases'),
          null,
          true
        )
        break
      }

      case 'FVPortal':
        type = 'Dialect'
        title = selectn('contextParameters.ancestry.dialect.dc:title', tile)
        imgObj = selectn('contextParameters.portal.fv-portal:logo', tile)

        desc = DOMPurify.sanitize(selectn('properties.fv-portal:about', tile), { ALLOWED_TAGS: [] })
        desc = desc.length > 300 ? '...' + desc.substr(desc.indexOf(this.props.searchTerm) - 50, 250) + '...' : desc

        targetPath = '/explore' + selectn('contextParameters.ancestry.dialect.path', tile)
        break

      case 'FVBook':
        imgObj = selectn('contextParameters.phrase.related_pictures[0]', tile)

        desc = DOMPurify.sanitize(selectn('dc:description', tile), { ALLOWED_TAGS: [] })
        desc = desc.length > 300 ? '...' + desc.substr(desc.indexOf(this.props.searchTerm) - 50, 250) + '...' : desc

        targetPath = NavigationHelpers.navigate(
          NavigationHelpers.generateUIDPath(
            'explore',
            tile,
            selectn('properties.fvbook:type', tile) == 'song' ? 'songs' : 'stories'