NextJS | Pulling correct content from ACF Pro wysiwyg field

Question

I have a NextJs project, combined with a WordPress Headless CMS. I'm using the WP GraphQL, WPGraphQL Gutenberg and WPGraphQL for ACF plugins.

I have a file contentBlock.js which calls the Content Block from ACF:

export default function ContentBlock(attributes) {

    const parsedData = JSON.parse(attributes.attributesJSON).data;
    let largeHeading;
    let smallHeading;
    let sectionId;
    let content = parsedData.content;

    if (parsedData.include_large_heading == 1) {
        largeHeading = <h2>{parsedData.large_heading}</h2>;
        sectionId = parsedData.section_id;
    }

    if (parsedData.include_small_heading == 1) {
        smallHeading = <h3>{parsedData.small_heading}</h3>;
    }

    return (
        <section className={`${styles.contentBlock} blog-container`} id={sectionId}>
            {largeHeading}
            {smallHeading}
            <p dangerouslySetInnerHTML={{__html: content}}></p>
        </section>
    )
}

the content variable returns the following:

<strong>This is a bold line of text.</strong>

This is a paragraph of some text. It doesn't have any line breaks. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae sollicitudin orci, at auctor elit. Donec libero odio, aliquet nec fringilla eu, viverra non magna. Pellentesque in sapien ac lectus egestas aliquam. Sed convallis dapibus magna a finibus. Vivamus consequat ex sed mauris consectetur, a volutpat sapien condimentum. Praesent consequat pharetra diam id aliquam. Duis dictum pharetra nibh. Proin quam augue, tincidunt at mollis a, posuere id lorem.

<ol>
    <li>This is a bullet points</li>
    <li>this is another bullet point</li>
</ol>

This is a paragraph of some text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae sollicitudin orci, at auctor elit. Donec libero odio, aliquet nec fringilla eu, viverra non magna. Pellentesque in sapien ac lectus egestas aliquam. Sed convallis dapibus magna a finibus. Vivamus consequat ex sed mauris consectetur, a volutpat sapien condimentum. Praesent consequat pharetra diam id aliquam. Duis dictum pharetra nibh. Proin quam augue, tincidunt at mollis a, posuere id lorem.

This is a paragraph of some text. It doesn't have any line breaks. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae sollicitudin orci, at auctor elit. Donec libero odio, aliquet nec fringilla eu, viverra non magna. Pellentesque in sapien ac lectus egestas aliquam. Sed convallis dapibus magna a finibus. Vivamus consequat ex sed mauris consectetur, a volutpat sapien condimentum. Praesent consequat pharetra diam id aliquam. Duis dictum pharetra nibh. Proin quam augue, tincidunt at mollis a, posuere id lorem.

The following code snippets return the following code:

<p>{content}</p> returns:

<strong>This is a bold line of text.</strong> This is a paragraph of some text. It doesn't have any line breaks. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae sollicitudin orci, at auctor elit. Donec libero odio, aliquet nec fringilla eu, viverra non magna. Pellentesque in sapien ac lectus egestas aliquam. Sed convallis dapibus magna a finibus. Vivamus consequat ex sed mauris consectetur, a volutpat sapien condimentum. Praesent consequat pharetra diam id aliquam. Duis dictum pharetra nibh. Proin quam augue, tincidunt at mollis a, posuere id lorem. <ol> <li>This is a bullet points</li> <li>this is another bullet point</li> </ol> This is a paragraph of some text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae sollicitudin orci, at auctor elit. Donec libero odio, aliquet nec fringilla eu, viverra non magna. Pellentesque in sapien ac lectus egestas aliquam. Sed convallis dapibus magna a finibus. Vivamus consequat ex sed mauris consectetur, a volutpat sapien condimentum. Praesent consequat pharetra diam id aliquam. Duis dictum pharetra nibh. Proin quam augue, tincidunt at mollis a, posuere id lorem. This is a paragraph of some text. It doesn't have any line breaks. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae sollicitudin orci, at auctor elit. Donec libero odio, aliquet nec fringilla eu, viverra non magna. Pellentesque in sapien ac lectus egestas aliquam. Sed convallis dapibus magna a finibus. Vivamus consequat ex sed mauris consectetur, a volutpat sapien condimentum. Praesent consequat pharetra diam id aliquam. Duis dictum pharetra nibh. Proin quam augue, tincidunt at mollis a, posuere id lorem.

<p dangerouslySetInnerHTML={{__html: content}}></p> returns:

This is a bold line of text. This is a paragraph of some text. It doesn't have any line breaks. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae sollicitudin orci, at auctor elit. Donec libero odio, aliquet nec fringilla eu, viverra non magna. Pellentesque in sapien ac lectus egestas aliquam. Sed convallis dapibus magna a finibus. Vivamus consequat ex sed mauris consectetur, a volutpat sapien condimentum. Praesent consequat pharetra diam id aliquam. Duis dictum pharetra nibh. Proin quam augue, tincidunt at mollis a, posuere id lorem.

 - This is a bullet points
 - This is another bullet point

This is a paragraph of some text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae sollicitudin orci, at auctor elit. Donec libero odio, aliquet nec fringilla eu, viverra non magna. Pellentesque in sapien ac lectus egestas aliquam. Sed convallis dapibus magna a finibus. Vivamus consequat ex sed mauris consectetur, a volutpat sapien condimentum. Praesent consequat pharetra diam id aliquam. Duis dictum pharetra nibh. Proin quam augue, tincidunt at mollis a, posuere id lorem. This is a paragraph of some text. It doesn't have any line breaks. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae sollicitudin orci, at auctor elit. Donec libero odio, aliquet nec fringilla eu, viverra non magna. Pellentesque in sapien ac lectus egestas aliquam. Sed convallis dapibus magna a finibus. Vivamus consequat ex sed mauris consectetur, a volutpat sapien condimentum. Praesent consequat pharetra diam id aliquam. Duis dictum pharetra nibh. Proin quam augue, tincidunt at mollis a, posuere id lorem.

Is there a way I can get it to format correctly like:

This is a bold line of text.

This is a paragraph of some text. It doesn't have any line breaks. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae sollicitudin orci, at auctor elit. Donec libero odio, aliquet nec fringilla eu, viverra non magna. Pellentesque in sapien ac lectus egestas aliquam. Sed convallis dapibus magna a finibus. Vivamus consequat ex sed mauris consectetur, a volutpat sapien condimentum. Praesent consequat pharetra diam id aliquam. Duis dictum pharetra nibh. Proin quam augue, tincidunt at mollis a, posuere id lorem.

• This is a bullet points
• This is another bullet point

This is a paragraph of some text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae sollicitudin orci, at auctor elit. Donec libero odio, aliquet nec fringilla eu, viverra non magna. Pellentesque in sapien ac lectus egestas aliquam. Sed convallis dapibus magna a finibus. Vivamus consequat ex sed mauris consectetur, a volutpat sapien condimentum. Praesent consequat pharetra diam id aliquam. Duis dictum pharetra nibh. Proin quam augue, tincidunt at mollis a, posuere id lorem.

This is a paragraph of some text. It doesn't have any line breaks. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae sollicitudin orci, at auctor elit. Donec libero odio, aliquet nec fringilla eu, viverra non magna. Pellentesque in sapien ac lectus egestas aliquam. Sed convallis dapibus magna a finibus. Vivamus consequat ex sed mauris consectetur, a volutpat sapien condimentum. Praesent consequat pharetra diam id aliquam. Duis dictum pharetra nibh. Proin quam augue, tincidunt at mollis a, posuere id lorem.