How to use the @braintree/sanitize-url.sanitizeUrl function in @braintree/sanitize-url

ids.split(',').forEach(function(_id) {
    let id = _id;
    if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
    if (typeof vertices[id] !== 'undefined') {
      if (config.securityLevel !== 'loose') {
        vertices[id].link = sanitizeUrl(linkStr); // .replace(/javascript:.*/g, '')
      } else {
        vertices[id].link = linkStr;
      }
    }
  });
  setTooltip(ids, tooltip);

const ListElement = ({ title, subtitle, imageUrl, buttons, sendMessage }) => {
  const titleMaxLength = 25
  const subTitleMaxLength = 50
  const buttonTitleMaxLength = 20

  const button = propOr(null, 0, buttons)

  return (
    <div>
      {imageUrl
        &amp;&amp; sanitizeUrl(imageUrl) !== 'about:blank' &amp;&amp; (
        <img src="{imageUrl}">
      )}

      <div>
        <p>{truncate(title, titleMaxLength)}</p>
        <p>{truncate(subtitle, subTitleMaxLength)}</p>

        {button
          &amp;&amp; (button.type === 'web_url' ? (
            sanitizeUrl(button.value) !== 'about:blank' &amp;&amp; (
              <a rel="noopener noreferrer" href="{button.value}"></a></div></div>

const button = propOr(null, 0, buttons)

  return (
    <div>
      {imageUrl
        &amp;&amp; sanitizeUrl(imageUrl) !== 'about:blank' &amp;&amp; (
        <img src="{imageUrl}">
      )}

      <div>
        <p>{truncate(title, titleMaxLength)}</p>
        <p>{truncate(subtitle, subTitleMaxLength)}</p>

        {button
          &amp;&amp; (button.type === 'web_url' ? (
            sanitizeUrl(button.value) !== 'about:blank' &amp;&amp; (
              <a rel="noopener noreferrer" href="{button.value}">
                {truncate(button.title, buttonTitleMaxLength)}
              </a>
            )
          ) : (
            <div> sendMessage({ type: 'text', content: button.value })}
            &gt;
              {truncate(button.title, buttonTitleMaxLength)}
            </div></div></div>

<div>{`${channel}`}</div>
                  <div>{`${tos}`}</div>
                
                <div>
                  <div>
                    {contactUrl ? (
                      <a href="{sanitizeUrl(contactUrl)}">
                        {name}
                      </a>
                    ) : (
                      <span>{name}</span>
                    )}
                  </div>
                  <div>
                    {email ? (
                      <a href="{sanitizeUrl(`mailto:${email}`)}">{email}</a>
                    ) : (
                      ""
                    )}
                  </div>
                  <div>
                    {terms ? (
                      <a href="{sanitizeUrl(terms)}">
                        {terms}
                      </a>
                    ) : (
                      "-"
                    )}
                  </div>
                </div>
              
              <div></div>

render () {
    const { image } = this.props

    if (image && sanitizeUrl(image) === 'about:blank') {
      return null
    }

    return (
      <div>
        {image &amp;&amp; <img src="{image}">}
        <img src="https://cdn.cai.tools.sap/webchat/istyping.gif">
      </div>
    )
  }
}

const Card = ({ content, sendMessage, onImageLoaded }) => {
  const { title, subtitle, imageUrl, buttons } = content

  if (imageUrl && sanitizeUrl(imageUrl) === 'about:blank') {
    return null
  }

  return (
    <div>
      {imageUrl &amp;&amp; <img src="{imageUrl}">}

      <div>
        <p>{truncate(title, 80)}</p>
        {subtitle &amp;&amp; <p>{truncate(subtitle, 80)}</p>}
      </div>

      {buttons.length ? (
        <div>
          {buttons.slice(0, 3).map((b, i) =&gt; (
            <button></button></div></div>

{name}
                      
                    ) : (
                      <span>{name}</span>
                    )}
                  
                  <div>
                    {email ? (
                      <a href="{sanitizeUrl(`mailto:${email}`)}">{email}</a>
                    ) : (
                      ""
                    )}
                  </div>
                  <div>
                    {terms ? (
                      <a href="{sanitizeUrl(terms)}">
                        {terms}
                      </a>
                    ) : (
                      "-"
                    )}
                  </div>
                
              
              <div>
                <a role="button" href="{window.swaggerUrl}">
                  {download}</a></div>

{summary}
                          
                        );
                      }
                    })()}
                  
                
                <div>
                  <div>{`${developer}`}</div>
                  <div>{`${channel}`}</div>
                  <div>{`${tos}`}</div>
                </div>
                <div>
                  <div>
                    {contactUrl ? (
                      <a href="{sanitizeUrl(contactUrl)}">
                        {name}
                      </a>
                    ) : (
                      <span>{name}</span>
                    )}
                  </div>
                  <div>
                    {email ? (
                      <a href="{sanitizeUrl(`mailto:${email}`)}">{email}</a>
                    ) : (
                      ""
                    )}
                  </div>
                  <div>
                    {terms ? (
                      <a href="{sanitizeUrl(terms)}"></a></div></div>

export function sanitizeUrl(url) {
  if(typeof url !== "string" || url === "") {
    return ""
  }

  return braintreeSanitizeUrl(url)
}

const Picture = ({ content, onImageLoaded }) => {
  if (content && sanitizeUrl(content) === 'about:blank') {
    return null
  }
  return <img src="{content}">
}