Editor.js react viewer

I've been using editor.js and react-editor-js as a WYSIWYG editor and now that I've developed the backend for images and text storing in a mongo database, I'm facing another issue: viewing those articles.

For those of you who don't know this is how every paragraph gets stored in editor.js:

"{\"time\":1579259743447,\"blocks\":[{\"type\":\"paragraph\",\"data\":{\"text\":\"How can I resist you?\"}},{\"type\":\"list\",\"data\":{\"style\":\"ordered\",\"items\":[\"<b>Mammamia</b>\"]}},{\"type\":\"paragraph\",\"data\":{\"text\":\"1<i><b>Bebebe</b></i>\"}},{\"type\":\"paragraph\",\"data\":{\"text\":\"<a href=\\\"https://google.com/\\\">Bobobo</a>\"}},{\"type\":\"quote\",\"data\":{\"text\":\"Pull me\",\"caption\":\"\",\"alignment\":\"left\"}},{\"type\":\"header\",\"data\":{\"text\":\"Mamma\",\"level\":1}},{\"type\":\"paragraph\",\"data\":{\"text\":\"1wowowo\"}},{\"type\":\"list\",\"data\":{\"style\":\"ordered\",\"items\":[\"Bismillah\"]}},{\"type\":\"paragraph\",\"data\":{\"text\":\"We will not let you go\"}},{\"type\":\"paragraph\",\"data\":{\"text\":\"Bis\"}},{\"type\":\"list\",\"data\":{\"style\":\"ordered\",\"items\":[\"Bismillah\"]}}],\"version\":\"2.16.1\"}"

And my issue now is trying to show those <a> <i> <b> as I can't just paste them into react like this:

<p>{elem.data.text}</p>

because react will reder , and as a text instead of as elements.
What can I do to overcome this issue?

This is what I've done so far:

<section>
        {article.body != undefined
          ? JSON.parse(article.body).blocks.map(elem => {
              console.log(elem);
              let rElem;
              switch (elem.type) {
                case "paragraph":
                  rElem = <p>{elem.data.text}</p>;
                  break;
                case "list":
                  switch (elem.data.style) {
                    case "ordered":
                      rElem = (
                        <ol>
                          {elem.data.items.map(innerElem => {
                            return <li>{innerElem.text}</li>;
                          })}
                        </ol>
                      );
                      break;
                    case "unordered":
                      rElem = (
                        <ul>
                          {elem.data.items.map(innerElem => {
                            return <li>{innerElem.text}</li>;
                          })}
                        </ul>
                      );
                      break;
                  }
                  break;
                case "image":
                  rElem = (
                    <img
                      src={elem.data.file.url}
                      width={elem.data.file.width}
                      height={elem.data.file.height}
                      alt={elem.data.file.url}
                    />
                  );
                  break;
                case "header":
                  switch (elem.data.level) {
                    case 1:
                      rElem = <h1>{elem.data.text}</h1>;
                      break;
                    case 2:
                      rElem = <h2>{elem.data.text}</h2>;
                      break;
                    case 3:
                      rElem = <h3>{elem.data.text}</h3>;
                      break;
                    case 4:
                      rElem = <h4>{elem.data.text}</h4>;
                      break;
                    case 5:
                      rElem = <h5>{elem.data.text}</h5>;
                      break;
                    case 6:
                      rElem = <h6>{elem.data.text}</h6>
                      break;
                  }
                  break;
                default:
                  rElem = null;
              }
              return rElem;
            })
          : null}
      </section>