How to use the react-instantsearch/connectors.connectHighlight function in react-instantsearch

// Run the DOMParser on each of the parts of text
    const unescaped = safeEscapeString(part.value);

    // If the text is highlighted, wrap in <mark> for the highlight
    // Otherwise just render the part in a <span>
    return part.isHighlighted ? (
      <mark>
        {unescaped}
      </mark>
    ) : (
      <span>{unescaped}</span>
    );
  });
};

export default connectHighlight(CustomHighlight);
</span></mark>

<input> { this.searchInput = input }}
            type="text"
            className="form-control form-control-lg"
            value={this.props.currentRefinement} //eslint-disable-line
            onChange={(e) =&gt; this.props.refine(e.target.value)} //eslint-disable-line
          /&gt;
        
      
    )
  }
}

const ConnectedSearchBox = connectSearchBox(MySearchBox)

const CustomHighlight = connectHighlight(
  ({ highlight, attribute, hit }) =&gt; {
    const parsedHit = highlight({
      attribute,
      hit,
      highlightProperty: '_highlightResult',
    })
    const highlightedHits = parsedHit.map((part) =&gt; {
      if (part.isHighlighted) return <mark>{part.value}</mark>
      return part.value
    })
    return <div>{highlightedHits}</div>
  }
)

const Hit = ({ hit }) =&gt; ( //eslint-disable-line

import React from "react";
import { connectHighlight } from "react-instantsearch/connectors";

const Highlight = connectHighlight(({ highlight, attributeName, hit, highlightProperty }) => {
  const parsedHit = highlight({
    attributeName,
    hit,
    highlightProperty: "_highlightResult",
  });
  const highlightedHits = parsedHit.map(part => {
    if (part.isHighlighted) return `<mark>${part.value}</mark>`;
    return part.value;
  });
  return <span>;
});

export default Highlight;
</span>