[React] Highlight search string matches in results without dangerouslySetInnerHTML

HighlightedResults.jsx

    // Highlight search string matches in results
    const HighlightedResults = (): JSX.Element | null => {
      if (inputValue) {
        const match = item.name.match(new RegExp(inputValue, 'i'))
        const MatchEl = (): ReactElement | null => {
          if (match && match.length) {
            return <strong>{match[0]}</strong>
          } else {
            return null
          }
        }
        const rest = item.name.split(new RegExp(inputValue, 'i'))

        return (
          <>
            {rest.map((x: string, index: number) => {
              if (index !== rest.length - 1) {
                return (
                  <span key={index}>
                    {x}
                    <MatchEl />
                  </span>
                )
              } else {
                return <span key={index}>{x}</span>
              }
            })}
          </>
        )
      } else {
        return <>{item.name}</>
      }
    }
.
.
.
.
    
    <HighlightedResults />