Algolia Search Highlight in Tags not working NextJS

Question

Algolia integration works fine in my NextJS project but can't quite get it to highlight Tags. Screenshot attached: Screenshot of Algolia SearchHighlight in Tags not working. Any help grateful!

So within the SearchResults.js the tags are currently rending in okay from Algolia but displaying outside of the <SearchHighlight> like so:

<p className="text-xs font-mono uppercase"> Tags: <SearchHighlight attribute="tags" hit={hit} />{hit.tags.join(", ")}</p>

After attempts to rewrite to (for example): <SearchHighlight attribute="tags" hit={hit.tags.join(", ")}/>

I want to know how to rewrite this to display Tags highlighted within the <span> tags. The 2 files in questions seem to be:

SearchHighlight.js

import { connectHighlight } from "react-instantsearch-dom"
const SearchHighlight = ({ highlight, attribute, hit }) => {
    const parsedHit = highlight({
        highlightProperty: '_highlightResult',
        attribute,
        hit
    })
    return <>
            {parsedHit.map(
                (part, i) =><span key={part.value + i}>
                    {part.isHighlighted ? <span className="bg-yellow-400 text-black mix-blend-difference">{part.value}</span> : part.value}
                </span>
            )}
    </>
}

export default  connectHighlight(SearchHighlight)

and SearchResults.js

import { connectStateResults } from "react-instantsearch-dom"
import Link from "next/link"
import SearchHighlight from "./SearchHighlight"
const SearchResults = ({searchResults, closeSearch}) => {
    if(!searchResults || !searchResults.query) return null
    const {hits,query} = searchResults
    if(!hits.length) return <p className="mt-4">No results found for <span className="font-semibold">
        &quot;{query}&quot;</span>
    </p>
    return <div className="overflow-y-auto py-4">
        {hits.map((hit, i) =><Link
            href={hit.href}
            key={hit.href + i}
            className="block px-4 py-4 hover:bg-gray-100 dark:hover:bg-white/10"
            onClick={closeSearch}
        >
                <h3 className="text-base mb-1">
                    <SearchHighlight attribute="title" hit={hit}/>
                </h3>
                <p className="text-sm mb-2">
                    <SearchHighlight attribute="summary" hit={hit} />
                </p>
                <p className="text-xs font-mono uppercase">
                    Tags: <SearchHighlight attribute="tags" hit={hit.tags.join(", ")}/>
                </p>
            </Link>
        )}
    </div>
}

export default connectStateResults(SearchResults)