How do I display JSON data with HTML tags applied, in React? [duplicate]

So I have JSON data with bunch of html tags attached in between. I've fetched & displayed the data as below.

componentDidMount() {
        this._callCake();
    }

_renderEachCake = () => {
    return (
        <EachCake 
        image={this.state.cake_object.image}
        body={this.state.cake_object.body}
        />
    );
  };

_callCake = () => {
        return fetch(`http://127.0.0.1:8000/api/cake/1`)
        .then((response) => response.json())
        .then(data => {
            this.setState({cake_object : data})
        })
        .catch((err) => console.log(err))
    }


render() {
    return (
        <div>
            <Container>
                <Row className="justify-content-center">
                    <Col><CakeHeader /></Col>
                </Row>
                <Row className="justify-content-center">
                    <Col>this._renderEachCake()</Col>
                </Row>
            </Container>
        </div>
    )
}

However when I see the data on the screen, I see all the "raw" data with html tags attached, not applied. Like below:

<p>&nbsp;<span style="font-size: 1rem;">This is how</span>all the text<span style="background-color: rgb(255, 255, 0);"> look like</span>

I cannot use replace(), because I need the tags applied to the text.
Any recommendations? Thanks a lot :)