How to correctly output a string in jsx with regex content?

Question

JavaScript

I tried wrapping the text matching the regex condition in a tag and displaying it in but if I use react-html-parser it outputs [object Object] when I pass text.replace(/#([^ ]+)/g, ReactHtmlParser(#$1)) .
If I pass it without ReactHtmlParser, then it returns span not as a tag with regex content, but as a string. How to return span as tag with regex content? Thanks in advance)
The full code looks like this:

function TextArea({text, note, setText}) {
  return (
      <div className="note-container">
        <textarea 
          className="note-body" 
          onChange={e => {
            setText(e.target.value)
          }}
          placeholder='Choose this text...'
          rows={10}
          defaultValue={note.text || ''}
        > 
        </textarea>
        <p className="note-body">{text.replace(/#([^ ]+)/g, ReactHtmlParser(<span class="hashtag">#$1</span>)) || ''}</p>
      </div>
  )

Answer 1

first replace in the text, and then pass this string to the ReactHtmlParser function
Example