HTML-React-Parser not converting on a React blog post body prop with TinyMCE

Question

I am building a blog with React and Material UI that has a single page where a user can view any post in full detail. The user submits the post data through TinyMCE and is saved to a JSON file in raw HTML. I am using HTML-React-Parser NPM package to convert the HTML to readable, formatted text. It is working on another component, but not this one. I am getting "TypeError: Frist argument must be a string".

> 37 |     <Typography variant="body5">
     | ^
  38 |         {parse(latestPost.body)}
  39 |     </Typography>
  40 | </Card>

This is what the component looks like:

import * as React from 'react';
import { Container } from '@mui/system';
import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { Card, CardMedia, Typography } from '@mui/material';
import parse from 'html-react-parser';

const SinglePost = () => {
    let { singlePostId } = useParams();
    const [latestPost, setLatestPost] = useState('');
    useEffect(() => {
        fetch(`http://localhost:8000/posts/${singlePostId}`)
            .then ((res) => {
                return res.json();
            })
            .then ((data) => {
                setLatestPost(data);
            });
    }, [singlePostId]);
    return ( 
        <>
            <Container maxWidth="md">
                <Card>
                    <CardMedia
                        component="img"
                        image={latestPost.url}
                    />
                    <Typography variant="h5">
                        {latestPost.title}
                    </Typography>
                    <Typography variant="h6">
                        {latestPost.category}
                    </Typography>
                    <Typography variant="body5">
                        {parse(latestPost.body)} //this is the prop that should be parsed
                    </Typography>
                </Card>
            </Container>
        </>
     );
}
 
export default SinglePost;

I have tried :

<div>{parse(latestPost.body)}</div>

and:

{parse(`latestPost.body`)}

Why is this not working as expected?

Answer 1

This:

{parse(latestPost.body || '')}

instead of:

{parse(latestPost.body)}