I have a string with HTML tags in it and I have to render the final compiled string as output.

Example:

export default function Example(props) {
  //Suppose values are {query1: "Hello", query2: "World"}
  const someMessage = `You searched for: <b>${query1}</b> and <b>${query2}</b>.`

  return (
    <div>{someMessage}</div>
  )
}

Output I'm getting: You searched for: <b>Hello</b> and <b>World</b>.

Expected Output: You searched for: Hello and World.

I am searching for an alternative other than the below one:

<div dangerouslySetInnerHTML={{__html: someMessage}} />;

Like a custom logic which can compile the HTML and return the formatted/required string