Визуализация HTML-разметки, полученной из бэкэнда в JSX

Question

Я пытаюсь отобразить HTML, который приходит из запроса, в виде строки. Я попытался передать его в качестве реквизита и визуализировать этот реквизит непосредственно в JSX. Ничего не получалось. Я не уверен, если мне нужно использовать renderProps или опасно SetInnerHTML. Но я действительно не хочу ссылаться непосредственно на DOM

import React, { Component } from 'react'

class SomePageComponent extends Component {
  state = {
    stateData: ''
  }
  
  componentDidMount = async() => {
    const { request } = this.props
    await request().then(data => this.setState({
        stateData: data
      })
    )
  }
  render() {
  const { stateData } = this.state
    return (
      <div>
       //so i need to put it somwhere here and i tried like tis below
         <div>{stateData}</div>
      //aslo i've tried like this
        <stateData />
      </div>
    )
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

`