Как разделить элементы, которые мы отправляем в dangerousSetInnerHTML?

Question

Я отправляю элементы в опасныйSetInnerHTML в NextJs.

Когда я отправляю его из родительского компонента таким образом, он не отображается на странице.

      myText:"<a>My Games</a> <span class='icon'></span> ",


<a       
   dangerouslySetInnerHTML={{
  __html: myText}}></a>

Но когда я отправляю его таким образом, он появляется на странице.

      myText: "My Games <span class='icon'></span>",

Причина, по которой я поместил текст «мои игры» в тег, я хочу, чтобы он подчеркивался при наведении курсора.

Как я могу это преодолеть? Любая помощь будет оценена по достоинству.