Mermaid JS giving me a syntax error in text whenever I try to re-render it

Question

error I've been trying to use a gantt chart in my react app which works fine when it first loads up and if I refresh. However whenever I change the props and componentDidUpdate() triggers, which triggers :

 if (prevProps.chart !== this.props.chart) {
            //console.log("the state has changed comp", this.state.chart)
            document
                .getElementById("mermaid-chart")
                .removeAttribute("data-processed");
            mermaid.contentLoaded()
            
        }

I get that image, forcing me to refresh the page

import React from "react";
import mermaid from "mermaid";


mermaid.initialize({
    startOnLoad: true,
    securityLevel: "loose",
    gantt: {
        barHeight: 40,
        barGap: 15,
        sectionFontSize: 20,
        leftPadding: 200,
        numberSectionStyles: 2,
        fontSize: 15,
    }
});


export default class Mermaid extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            chart: props.chart,
        };
    }

    componentDidMount() {
        //console.log("comp mounted")
        mermaid.contentLoaded();
    }

    componentDidUpdate(prevProps, prevState) {
         //console.log("the state has not changed comp", prevProps.chart);
        // console.log("the current state has not changed comp", this.props.chart);
        if (prevProps.chart !== this.props.chart) {
            //console.log("the state has changed comp", this.state.chart)
            document
                .getElementById("mermaid-chart")
                .removeAttribute("data-processed");
            mermaid.contentLoaded()
            
        }
    }
    render() {
        return <div className="mermaid" id="mermaid-chart">{this.state.chart}</div>;
    }

This is what my code is looking like, in my component I have return (<Mermaid chart={chart} />)

When I use an older version of Mermaid.js it tells me that it's trying to render a graph with the text : "<svg id =...." which I think happens because it's trying to render the first child of the div being returned, and I'm not sure how to make it try to render the prop instead.

Any help would be much appriciated