'React Mermaid 9.0.1 flowchart graph: syntax error in graph data

This is my code for the Mermaid Flowchart Component

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

mermaid.initialize({
    startOnLoad: true
});

/**
* Component.
*/
class WorkflowGraph extends React.Component {
    
    /**
    * lifecycle method of component.
    */
    componentDidMount() {
        mermaid.contentLoaded();
    }
    /**
      * render method.
      * @return {string}
      */
    render() {
        return <div className="mermaid">{this.props.chart }</div>;
    }
}

const WorkflowFlowchart = (props) => {
    const { graphData } = props
    
        return (
        <div style={{display:"flex",justifyContent:"center"}}>
            <WorkflowGraph
                chart={graphData}
            />
        </div>
    );
}

export default WorkflowFlowchart

I am getting the graphData via api and passing it as a props. This is the graph data

API response

{
    "statusCode": 0,      
    "graphData": "`graph TB;112((112))--BRE_RESPONSE_AWAITED-->366((366));style 112 fill:#0f0,stroke:#333,stroke-width:4px;style 112 fill:#f00,stroke:#333,stroke-width:4px;366((366))--BRE_SUCCESS-->355((355));style 366 fill:#f00,stroke:#333,stroke-width:4px;366((366))--BRE_ERROR-->356((356));style 366 fill:#f00,stroke:#333,stroke-width:4px;355((355))--MAQUETTE_FRAUD_CHECK_FAILURE-->179((179));style 355 fill:#f00,stroke:#333,stroke-width:4px;355((355))--BANKING_ACTION_DONE-->428((428));style 355 fill:#f00,stroke:#333,stroke-width:4px;355((355))--BANK_VALIDATION_PENDING-->558((558));style 355 fill:#f00,stroke:#333,stroke-width:4px;558((558))--DOCUMENT_UPLOADED-->114((114));style 558 fill:#f00,stroke:#333,stroke-width:4px;114((114))--EMANDATE_SUCCESS-->557((557));style 114 fill:#f00,stroke:#333,stroke-width:4px;428((428))-->557((557));style 428 fill:#f00,stroke:#333,stroke-width:4px;557((557))--LOAN_AGREEMENT_SUCCESS-->353((353));style 557 fill:#f00,stroke:#333,stroke-width:4px;557((557))--APPLICATION_PENDING-->555((555));style 557 fill:#f00,stroke:#333,stroke-width:4px;557((557))--LOAN_APPLICATION_ACCEPTED-->350((350));style 557 fill:#f00,stroke:#333,stroke-width:4px;353((353))--QC_ACTION_PENDING-->181((181));style 353 fill:#f00,stroke:#333,stroke-width:4px;353((353))--QC_ALLOCATION_REJECTED-->180((180));style 353 fill:#f00,stroke:#333,stroke-width:4px;180((180))-->181((181));style 180 fill:#f00,stroke:#333,stroke-width:4px;181((181))--PANEL_SUCCESS-->166((166));style 181 fill:#f00,stroke:#333,stroke-width:4px;181((181))--LOAN_QC_REJECTED-->358((358));style 181 fill:#f00,stroke:#333,stroke-width:4px;181((181))--QC_REJECTED-->183((183));style 181 fill:#f00,stroke:#333,stroke-width:4px;183((183))-->114((114));style 183 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->181((181));style 114 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->180((180));style 114 fill:#f00,stroke:#333,stroke-width:4px;347((347))--LMS_CALLBACK_SUCCESS-->330((330));style 347 fill:#f00,stroke:#333,stroke-width:4px;166((166))-->350((350));style 166 fill:#f00,stroke:#333,stroke-width:4px;166((166))--PREDISBURSAL_FAILED-->357((357));style 166 fill:#f00,stroke:#333,stroke-width:4px;166((166))-->555((555));style 166 fill:#f00,stroke:#333,stroke-width:4px;357((357))-->350((350));style 357 fill:#f00,stroke:#333,stroke-width:4px;357((357))-->555((555));style 357 fill:#f00,stroke:#333,stroke-width:4px;350((350))--KAFKA_PUSH_SUCCESS-->700((700));style 350 fill:#f00,stroke:#333,stroke-width:4px;350((350))--KAFKA_PUSH_FAILED-->701((701));style 350 fill:#f00,stroke:#333,stroke-width:4px;555((555))-->700((700));style 555 fill:#f00,stroke:#333,stroke-width:4px;555((555))-->701((701));style 555 fill:#f00,stroke:#333,stroke-width:4px;700((700))--LMS_SUBMIT_APPLICATION_SUCCESS-->346((346));style 700 fill:#f00,stroke:#333,stroke-width:4px;701((701))-->346((346));style 701 fill:#f00,stroke:#333,stroke-width:4px;700((700))--LMS_SUBMIT_APPLICATION_FAILED-->347((347));style 700 fill:#f00,stroke:#333,stroke-width:4px;701((701))-->347((347));style 701 fill:#f00,stroke:#333,stroke-width:4px;347((347))-->346((346));style 347 fill:#f00,stroke:#333,stroke-width:4px;700((700))--LOAN_APPLICATION_REJECTED-->351((351));style 700 fill:#f00,stroke:#333,stroke-width:4px;701((701))-->351((351));style 701 fill:#f00,stroke:#333,stroke-width:4px;351((351))-->347((347));style 351 fill:#f00,stroke:#333,stroke-width:4px;351((351))-->346((346));style 351 fill:#f00,stroke:#333,stroke-width:4px;346((346))-->330((330));style 346 fill:#f00,stroke:#333,stroke-width:4px;346((346))--LMS_CALLBACK_REJECTED-->333((333));style 346 fill:#f00,stroke:#333,stroke-width:4px;346((346))--LMS_CALLBACK_PENDING-->334((334));style 346 fill:#f00,stroke:#333,stroke-width:4px;346((346))--LMS_CALLBACK_FAILED-->345((345));style 346 fill:#f00,stroke:#333,stroke-width:4px;330((330))--LEAD_SUCCESSFULLY_CLOSED-->156((156));style 330 fill:#f00,stroke:#333,stroke-width:4px;333((333))--NOTIFICATION_SUCCESS-->167((167));style 333 fill:#f00,stroke:#333,stroke-width:4px;333((333))--NOTIFICATION_ERROR-->168((168));style 333 fill:#f00,stroke:#333,stroke-width:4px;167((167))--LEAD_FAILURE-->504((504));style 167 fill:#f00,stroke:#333,stroke-width:4px;168((168))-->504((504));style 168 fill:#f00,stroke:#333,stroke-width:4px;334((334))-->330((330));style 334 fill:#f00,stroke:#333,stroke-width:4px;334((334))-->333((333));style 334 fill:#f00,stroke:#333,stroke-width:4px;334((334))-->345((345));style 334 fill:#f00,stroke:#333,stroke-width:4px;334((334))-->334((334));style 334 fill:#f00,stroke:#333,stroke-width:4px;345((345))-->330((330));style 345 fill:#f00,stroke:#333,stroke-width:4px;345((345))-->333((333));style 345 fill:#f00,stroke:#333,stroke-width:4px;345((345))-->334((334));style 345 fill:#f00,stroke:#333,stroke-width:4px;345((345))-->345((345));style 345 fill:#f00,stroke:#333,stroke-width:4px;112((112))-->114((114));style 112 fill:#f00,stroke:#333,stroke-width:4px;700((700))-->350((350));style 700 fill:#f00,stroke:#333,stroke-width:4px;346((346))-->504((504));style 346 fill:#f00,stroke:#333,stroke-width:4px;346((346))--LMS_CALLBACK_PENDING_BANK_PAN-->359((359));style 346 fill:#f00,stroke:#333,stroke-width:4px;112((112))-->358((358));style 112 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->350((350));style 114 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->357((357));style 114 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->555((555));style 114 fill:#f00,stroke:#333,stroke-width:4px;558((558))-->428((428));style 558 fill:#f00,stroke:#333,stroke-width:4px;558((558))-->558((558));style 558 fill:#f00,stroke:#333,stroke-width:4px;558((558))-->179((179));style 558 fill:#f00,stroke:#333,stroke-width:4px;366((366))--UPDATE_LOAN_OFFER-->377((377));style 366 fill:#f00,stroke:#333,stroke-width:4px;377((377))-->355((355));style 377 fill:#f00,stroke:#333,stroke-width:4px;428((428))-->428((428));style 428 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->428((428));style 114 fill:#f00,stroke:#333,stroke-width:4px;428((428))-->179((179));style 428 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->179((179));style 114 fill:#f00,stroke:#333,stroke-width:4px;style 114 fill:#f00,stroke:#333,stroke-width:4px;`",
}

`graph TB;112((112))--BRE_RESPONSE_AWAITED-->366((366));style 112 fill:#0f0,stroke:#333,stroke-width:4px;style 112 fill:#f00,stroke:#333,stroke-width:4px;366((366))--BRE_SUCCESS-->355((355));style 366 fill:#f00,stroke:#333,stroke-width:4px;366((366))--BRE_ERROR-->356((356));style 366 fill:#f00,stroke:#333,stroke-width:4px;355((355))--MAQUETTE_FRAUD_CHECK_FAILURE-->179((179));style 355 fill:#f00,stroke:#333,stroke-width:4px;355((355))--BANKING_ACTION_DONE-->428((428));style 355 fill:#f00,stroke:#333,stroke-width:4px;355((355))--BANK_VALIDATION_PENDING-->558((558));style 355 fill:#f00,stroke:#333,stroke-width:4px;558((558))--DOCUMENT_UPLOADED-->114((114));style 558 fill:#f00,stroke:#333,stroke-width:4px;114((114))--EMANDATE_SUCCESS-->557((557));style 114 fill:#f00,stroke:#333,stroke-width:4px;428((428))-->557((557));style 428 fill:#f00,stroke:#333,stroke-width:4px;557((557))--LOAN_AGREEMENT_SUCCESS-->353((353));style 557 fill:#f00,stroke:#333,stroke-width:4px;557((557))--APPLICATION_PENDING-->555((555));style 557 fill:#f00,stroke:#333,stroke-width:4px;557((557))--LOAN_APPLICATION_ACCEPTED-->350((350));style 557 fill:#f00,stroke:#333,stroke-width:4px;353((353))--QC_ACTION_PENDING-->181((181));style 353 fill:#f00,stroke:#333,stroke-width:4px;353((353))--QC_ALLOCATION_REJECTED-->180((180));style 353 fill:#f00,stroke:#333,stroke-width:4px;180((180))-->181((181));style 180 fill:#f00,stroke:#333,stroke-width:4px;181((181))--PANEL_SUCCESS-->166((166));style 181 fill:#f00,stroke:#333,stroke-width:4px;181((181))--LOAN_QC_REJECTED-->358((358));style 181 fill:#f00,stroke:#333,stroke-width:4px;181((181))--QC_REJECTED-->183((183));style 181 fill:#f00,stroke:#333,stroke-width:4px;183((183))-->114((114));style 183 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->181((181));style 114 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->180((180));style 114 fill:#f00,stroke:#333,stroke-width:4px;347((347))--LMS_CALLBACK_SUCCESS-->330((330));style 347 fill:#f00,stroke:#333,stroke-width:4px;166((166))-->350((350));style 166 fill:#f00,stroke:#333,stroke-width:4px;166((166))--PREDISBURSAL_FAILED-->357((357));style 166 fill:#f00,stroke:#333,stroke-width:4px;166((166))-->555((555));style 166 fill:#f00,stroke:#333,stroke-width:4px;357((357))-->350((350));style 357 fill:#f00,stroke:#333,stroke-width:4px;357((357))-->555((555));style 357 fill:#f00,stroke:#333,stroke-width:4px;350((350))--KAFKA_PUSH_SUCCESS-->700((700));style 350 fill:#f00,stroke:#333,stroke-width:4px;350((350))--KAFKA_PUSH_FAILED-->701((701));style 350 fill:#f00,stroke:#333,stroke-width:4px;555((555))-->700((700));style 555 fill:#f00,stroke:#333,stroke-width:4px;555((555))-->701((701));style 555 fill:#f00,stroke:#333,stroke-width:4px;700((700))--LMS_SUBMIT_APPLICATION_SUCCESS-->346((346));style 700 fill:#f00,stroke:#333,stroke-width:4px;701((701))-->346((346));style 701 fill:#f00,stroke:#333,stroke-width:4px;700((700))--LMS_SUBMIT_APPLICATION_FAILED-->347((347));style 700 fill:#f00,stroke:#333,stroke-width:4px;701((701))-->347((347));style 701 fill:#f00,stroke:#333,stroke-width:4px;347((347))-->346((346));style 347 fill:#f00,stroke:#333,stroke-width:4px;700((700))--LOAN_APPLICATION_REJECTED-->351((351));style 700 fill:#f00,stroke:#333,stroke-width:4px;701((701))-->351((351));style 701 fill:#f00,stroke:#333,stroke-width:4px;351((351))-->347((347));style 351 fill:#f00,stroke:#333,stroke-width:4px;351((351))-->346((346));style 351 fill:#f00,stroke:#333,stroke-width:4px;346((346))-->330((330));style 346 fill:#f00,stroke:#333,stroke-width:4px;346((346))--LMS_CALLBACK_REJECTED-->333((333));style 346 fill:#f00,stroke:#333,stroke-width:4px;346((346))--LMS_CALLBACK_PENDING-->334((334));style 346 fill:#f00,stroke:#333,stroke-width:4px;346((346))--LMS_CALLBACK_FAILED-->345((345));style 346 fill:#f00,stroke:#333,stroke-width:4px;330((330))--LEAD_SUCCESSFULLY_CLOSED-->156((156));style 330 fill:#f00,stroke:#333,stroke-width:4px;333((333))--NOTIFICATION_SUCCESS-->167((167));style 333 fill:#f00,stroke:#333,stroke-width:4px;333((333))--NOTIFICATION_ERROR-->168((168));style 333 fill:#f00,stroke:#333,stroke-width:4px;167((167))--LEAD_FAILURE-->504((504));style 167 fill:#f00,stroke:#333,stroke-width:4px;168((168))-->504((504));style 168 fill:#f00,stroke:#333,stroke-width:4px;334((334))-->330((330));style 334 fill:#f00,stroke:#333,stroke-width:4px;334((334))-->333((333));style 334 fill:#f00,stroke:#333,stroke-width:4px;334((334))-->345((345));style 334 fill:#f00,stroke:#333,stroke-width:4px;334((334))-->334((334));style 334 fill:#f00,stroke:#333,stroke-width:4px;345((345))-->330((330));style 345 fill:#f00,stroke:#333,stroke-width:4px;345((345))-->333((333));style 345 fill:#f00,stroke:#333,stroke-width:4px;345((345))-->334((334));style 345 fill:#f00,stroke:#333,stroke-width:4px;345((345))-->345((345));style 345 fill:#f00,stroke:#333,stroke-width:4px;112((112))-->114((114));style 112 fill:#f00,stroke:#333,stroke-width:4px;700((700))-->350((350));style 700 fill:#f00,stroke:#333,stroke-width:4px;346((346))-->504((504));style 346 fill:#f00,stroke:#333,stroke-width:4px;346((346))--LMS_CALLBACK_PENDING_BANK_PAN-->359((359));style 346 fill:#f00,stroke:#333,stroke-width:4px;112((112))-->358((358));style 112 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->350((350));style 114 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->357((357));style 114 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->555((555));style 114 fill:#f00,stroke:#333,stroke-width:4px;558((558))-->428((428));style 558 fill:#f00,stroke:#333,stroke-width:4px;558((558))-->558((558));style 558 fill:#f00,stroke:#333,stroke-width:4px;558((558))-->179((179));style 558 fill:#f00,stroke:#333,stroke-width:4px;366((366))--UPDATE_LOAN_OFFER-->377((377));style 366 fill:#f00,stroke:#333,stroke-width:4px;377((377))-->355((355));style 377 fill:#f00,stroke:#333,stroke-width:4px;428((428))-->428((428));style 428 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->428((428));style 114 fill:#f00,stroke:#333,stroke-width:4px;428((428))-->179((179));style 428 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->179((179));style 114 fill:#f00,stroke:#333,stroke-width:4px;style 114 fill:#f00,stroke:#333,stroke-width:4px;`

Even though the syntax is correct I am getting the syntax error in grap message.

if I hardcode the same in the code and it works fine.

 <WorkflowGraph
                chart={`graph TB;112((112))--BRE_RESPONSE_AWAITED-->366((366));style 112 fill:#0f0,stroke:#333,stroke-width:4px;style 112 fill:#f00,stroke:#333,stroke-width:4px;366((366))--BRE_SUCCESS-->355((355));style 366 fill:#f00,stroke:#333,stroke-width:4px;366((366))--BRE_ERROR-->356((356));style 366 fill:#f00,stroke:#333,stroke-width:4px;355((355))--MAQUETTE_FRAUD_CHECK_FAILURE-->179((179));style 355 fill:#f00,stroke:#333,stroke-width:4px;355((355))--BANKING_ACTION_DONE-->428((428));style 355 fill:#f00,stroke:#333,stroke-width:4px;355((355))--BANK_VALIDATION_PENDING-->558((558));style 355 fill:#f00,stroke:#333,stroke-width:4px;558((558))--DOCUMENT_UPLOADED-->114((114));style 558 fill:#f00,stroke:#333,stroke-width:4px;114((114))--EMANDATE_SUCCESS-->557((557));style 114 fill:#f00,stroke:#333,stroke-width:4px;428((428))-->557((557));style 428 fill:#f00,stroke:#333,stroke-width:4px;557((557))--LOAN_AGREEMENT_SUCCESS-->353((353));style 557 fill:#f00,stroke:#333,stroke-width:4px;557((557))--APPLICATION_PENDING-->555((555));style 557 fill:#f00,stroke:#333,stroke-width:4px;557((557))--LOAN_APPLICATION_ACCEPTED-->350((350));style 557 fill:#f00,stroke:#333,stroke-width:4px;353((353))--QC_ACTION_PENDING-->181((181));style 353 fill:#f00,stroke:#333,stroke-width:4px;353((353))--QC_ALLOCATION_REJECTED-->180((180));style 353 fill:#f00,stroke:#333,stroke-width:4px;180((180))-->181((181));style 180 fill:#f00,stroke:#333,stroke-width:4px;181((181))--PANEL_SUCCESS-->166((166));style 181 fill:#f00,stroke:#333,stroke-width:4px;181((181))--LOAN_QC_REJECTED-->358((358));style 181 fill:#f00,stroke:#333,stroke-width:4px;181((181))--QC_REJECTED-->183((183));style 181 fill:#f00,stroke:#333,stroke-width:4px;183((183))-->114((114));style 183 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->181((181));style 114 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->180((180));style 114 fill:#f00,stroke:#333,stroke-width:4px;347((347))--LMS_CALLBACK_SUCCESS-->330((330));style 347 fill:#f00,stroke:#333,stroke-width:4px;166((166))-->350((350));style 166 fill:#f00,stroke:#333,stroke-width:4px;166((166))--PREDISBURSAL_FAILED-->357((357));style 166 fill:#f00,stroke:#333,stroke-width:4px;166((166))-->555((555));style 166 fill:#f00,stroke:#333,stroke-width:4px;357((357))-->350((350));style 357 fill:#f00,stroke:#333,stroke-width:4px;357((357))-->555((555));style 357 fill:#f00,stroke:#333,stroke-width:4px;350((350))--KAFKA_PUSH_SUCCESS-->700((700));style 350 fill:#f00,stroke:#333,stroke-width:4px;350((350))--KAFKA_PUSH_FAILED-->701((701));style 350 fill:#f00,stroke:#333,stroke-width:4px;555((555))-->700((700));style 555 fill:#f00,stroke:#333,stroke-width:4px;555((555))-->701((701));style 555 fill:#f00,stroke:#333,stroke-width:4px;700((700))--LMS_SUBMIT_APPLICATION_SUCCESS-->346((346));style 700 fill:#f00,stroke:#333,stroke-width:4px;701((701))-->346((346));style 701 fill:#f00,stroke:#333,stroke-width:4px;700((700))--LMS_SUBMIT_APPLICATION_FAILED-->347((347));style 700 fill:#f00,stroke:#333,stroke-width:4px;701((701))-->347((347));style 701 fill:#f00,stroke:#333,stroke-width:4px;347((347))-->346((346));style 347 fill:#f00,stroke:#333,stroke-width:4px;700((700))--LOAN_APPLICATION_REJECTED-->351((351));style 700 fill:#f00,stroke:#333,stroke-width:4px;701((701))-->351((351));style 701 fill:#f00,stroke:#333,stroke-width:4px;351((351))-->347((347));style 351 fill:#f00,stroke:#333,stroke-width:4px;351((351))-->346((346));style 351 fill:#f00,stroke:#333,stroke-width:4px;346((346))-->330((330));style 346 fill:#f00,stroke:#333,stroke-width:4px;346((346))--LMS_CALLBACK_REJECTED-->333((333));style 346 fill:#f00,stroke:#333,stroke-width:4px;346((346))--LMS_CALLBACK_PENDING-->334((334));style 346 fill:#f00,stroke:#333,stroke-width:4px;346((346))--LMS_CALLBACK_FAILED-->345((345));style 346 fill:#f00,stroke:#333,stroke-width:4px;330((330))--LEAD_SUCCESSFULLY_CLOSED-->156((156));style 330 fill:#f00,stroke:#333,stroke-width:4px;333((333))--NOTIFICATION_SUCCESS-->167((167));style 333 fill:#f00,stroke:#333,stroke-width:4px;333((333))--NOTIFICATION_ERROR-->168((168));style 333 fill:#f00,stroke:#333,stroke-width:4px;167((167))--LEAD_FAILURE-->504((504));style 167 fill:#f00,stroke:#333,stroke-width:4px;168((168))-->504((504));style 168 fill:#f00,stroke:#333,stroke-width:4px;334((334))-->330((330));style 334 fill:#f00,stroke:#333,stroke-width:4px;334((334))-->333((333));style 334 fill:#f00,stroke:#333,stroke-width:4px;334((334))-->345((345));style 334 fill:#f00,stroke:#333,stroke-width:4px;334((334))-->334((334));style 334 fill:#f00,stroke:#333,stroke-width:4px;345((345))-->330((330));style 345 fill:#f00,stroke:#333,stroke-width:4px;345((345))-->333((333));style 345 fill:#f00,stroke:#333,stroke-width:4px;345((345))-->334((334));style 345 fill:#f00,stroke:#333,stroke-width:4px;345((345))-->345((345));style 345 fill:#f00,stroke:#333,stroke-width:4px;112((112))-->114((114));style 112 fill:#f00,stroke:#333,stroke-width:4px;700((700))-->350((350));style 700 fill:#f00,stroke:#333,stroke-width:4px;346((346))-->504((504));style 346 fill:#f00,stroke:#333,stroke-width:4px;346((346))--LMS_CALLBACK_PENDING_BANK_PAN-->359((359));style 346 fill:#f00,stroke:#333,stroke-width:4px;112((112))-->358((358));style 112 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->350((350));style 114 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->357((357));style 114 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->555((555));style 114 fill:#f00,stroke:#333,stroke-width:4px;558((558))-->428((428));style 558 fill:#f00,stroke:#333,stroke-width:4px;558((558))-->558((558));style 558 fill:#f00,stroke:#333,stroke-width:4px;558((558))-->179((179));style 558 fill:#f00,stroke:#333,stroke-width:4px;366((366))--UPDATE_LOAN_OFFER-->377((377));style 366 fill:#f00,stroke:#333,stroke-width:4px;377((377))-->355((355));style 377 fill:#f00,stroke:#333,stroke-width:4px;428((428))-->428((428));style 428 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->428((428));style 114 fill:#f00,stroke:#333,stroke-width:4px;428((428))-->179((179));style 428 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->179((179));style 114 fill:#f00,stroke:#333,stroke-width:4px;style 114 fill:#f00,stroke:#333,stroke-width:4px;`}
            />

Solution 1:^[1]

Your API response includes backticks that surround the actual data:

{
    "statusCode": 0,      
    "graphData": "`graph TB;112((112))--BRE_RESPONSE_AWAITED-->366((366));style 112 fill:#0f0,stroke:#333,stroke-width:4px;style 112 fill:#f00,stroke:#333,stroke-width:4px;366((366))--BRE_SUCCESS-->355((355));style 366 fill:#f00,stroke:#333,stroke-width:4px;366((366))--BRE_ERROR-->356((356));style 366 fill:#f00,stroke:#333,stroke-width:4px;355((355))--MAQUETTE_FRAUD_CHECK_FAILURE-->179((179));style 355 fill:#f00,stroke:#333,stroke-width:4px;355((355))--BANKING_ACTION_DONE-->428((428));style 355 fill:#f00,stroke:#333,stroke-width:4px;355((355))--BANK_VALIDATION_PENDING-->558((558));style 355 fill:#f00,stroke:#333,stroke-width:4px;558((558))--DOCUMENT_UPLOADED-->114((114));style 558 fill:#f00,stroke:#333,stroke-width:4px;114((114))--EMANDATE_SUCCESS-->557((557));style 114 fill:#f00,stroke:#333,stroke-width:4px;428((428))-->557((557));style 428 fill:#f00,stroke:#333,stroke-width:4px;557((557))--LOAN_AGREEMENT_SUCCESS-->353((353));style 557 fill:#f00,stroke:#333,stroke-width:4px;557((557))--APPLICATION_PENDING-->555((555));style 557 fill:#f00,stroke:#333,stroke-width:4px;557((557))--LOAN_APPLICATION_ACCEPTED-->350((350));style 557 fill:#f00,stroke:#333,stroke-width:4px;353((353))--QC_ACTION_PENDING-->181((181));style 353 fill:#f00,stroke:#333,stroke-width:4px;353((353))--QC_ALLOCATION_REJECTED-->180((180));style 353 fill:#f00,stroke:#333,stroke-width:4px;180((180))-->181((181));style 180 fill:#f00,stroke:#333,stroke-width:4px;181((181))--PANEL_SUCCESS-->166((166));style 181 fill:#f00,stroke:#333,stroke-width:4px;181((181))--LOAN_QC_REJECTED-->358((358));style 181 fill:#f00,stroke:#333,stroke-width:4px;181((181))--QC_REJECTED-->183((183));style 181 fill:#f00,stroke:#333,stroke-width:4px;183((183))-->114((114));style 183 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->181((181));style 114 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->180((180));style 114 fill:#f00,stroke:#333,stroke-width:4px;347((347))--LMS_CALLBACK_SUCCESS-->330((330));style 347 fill:#f00,stroke:#333,stroke-width:4px;166((166))-->350((350));style 166 fill:#f00,stroke:#333,stroke-width:4px;166((166))--PREDISBURSAL_FAILED-->357((357));style 166 fill:#f00,stroke:#333,stroke-width:4px;166((166))-->555((555));style 166 fill:#f00,stroke:#333,stroke-width:4px;357((357))-->350((350));style 357 fill:#f00,stroke:#333,stroke-width:4px;357((357))-->555((555));style 357 fill:#f00,stroke:#333,stroke-width:4px;350((350))--KAFKA_PUSH_SUCCESS-->700((700));style 350 fill:#f00,stroke:#333,stroke-width:4px;350((350))--KAFKA_PUSH_FAILED-->701((701));style 350 fill:#f00,stroke:#333,stroke-width:4px;555((555))-->700((700));style 555 fill:#f00,stroke:#333,stroke-width:4px;555((555))-->701((701));style 555 fill:#f00,stroke:#333,stroke-width:4px;700((700))--LMS_SUBMIT_APPLICATION_SUCCESS-->346((346));style 700 fill:#f00,stroke:#333,stroke-width:4px;701((701))-->346((346));style 701 fill:#f00,stroke:#333,stroke-width:4px;700((700))--LMS_SUBMIT_APPLICATION_FAILED-->347((347));style 700 fill:#f00,stroke:#333,stroke-width:4px;701((701))-->347((347));style 701 fill:#f00,stroke:#333,stroke-width:4px;347((347))-->346((346));style 347 fill:#f00,stroke:#333,stroke-width:4px;700((700))--LOAN_APPLICATION_REJECTED-->351((351));style 700 fill:#f00,stroke:#333,stroke-width:4px;701((701))-->351((351));style 701 fill:#f00,stroke:#333,stroke-width:4px;351((351))-->347((347));style 351 fill:#f00,stroke:#333,stroke-width:4px;351((351))-->346((346));style 351 fill:#f00,stroke:#333,stroke-width:4px;346((346))-->330((330));style 346 fill:#f00,stroke:#333,stroke-width:4px;346((346))--LMS_CALLBACK_REJECTED-->333((333));style 346 fill:#f00,stroke:#333,stroke-width:4px;346((346))--LMS_CALLBACK_PENDING-->334((334));style 346 fill:#f00,stroke:#333,stroke-width:4px;346((346))--LMS_CALLBACK_FAILED-->345((345));style 346 fill:#f00,stroke:#333,stroke-width:4px;330((330))--LEAD_SUCCESSFULLY_CLOSED-->156((156));style 330 fill:#f00,stroke:#333,stroke-width:4px;333((333))--NOTIFICATION_SUCCESS-->167((167));style 333 fill:#f00,stroke:#333,stroke-width:4px;333((333))--NOTIFICATION_ERROR-->168((168));style 333 fill:#f00,stroke:#333,stroke-width:4px;167((167))--LEAD_FAILURE-->504((504));style 167 fill:#f00,stroke:#333,stroke-width:4px;168((168))-->504((504));style 168 fill:#f00,stroke:#333,stroke-width:4px;334((334))-->330((330));style 334 fill:#f00,stroke:#333,stroke-width:4px;334((334))-->333((333));style 334 fill:#f00,stroke:#333,stroke-width:4px;334((334))-->345((345));style 334 fill:#f00,stroke:#333,stroke-width:4px;334((334))-->334((334));style 334 fill:#f00,stroke:#333,stroke-width:4px;345((345))-->330((330));style 345 fill:#f00,stroke:#333,stroke-width:4px;345((345))-->333((333));style 345 fill:#f00,stroke:#333,stroke-width:4px;345((345))-->334((334));style 345 fill:#f00,stroke:#333,stroke-width:4px;345((345))-->345((345));style 345 fill:#f00,stroke:#333,stroke-width:4px;112((112))-->114((114));style 112 fill:#f00,stroke:#333,stroke-width:4px;700((700))-->350((350));style 700 fill:#f00,stroke:#333,stroke-width:4px;346((346))-->504((504));style 346 fill:#f00,stroke:#333,stroke-width:4px;346((346))--LMS_CALLBACK_PENDING_BANK_PAN-->359((359));style 346 fill:#f00,stroke:#333,stroke-width:4px;112((112))-->358((358));style 112 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->350((350));style 114 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->357((357));style 114 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->555((555));style 114 fill:#f00,stroke:#333,stroke-width:4px;558((558))-->428((428));style 558 fill:#f00,stroke:#333,stroke-width:4px;558((558))-->558((558));style 558 fill:#f00,stroke:#333,stroke-width:4px;558((558))-->179((179));style 558 fill:#f00,stroke:#333,stroke-width:4px;366((366))--UPDATE_LOAN_OFFER-->377((377));style 366 fill:#f00,stroke:#333,stroke-width:4px;377((377))-->355((355));style 377 fill:#f00,stroke:#333,stroke-width:4px;428((428))-->428((428));style 428 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->428((428));style 114 fill:#f00,stroke:#333,stroke-width:4px;428((428))-->179((179));style 428 fill:#f00,stroke:#333,stroke-width:4px;114((114))-->179((179));style 114 fill:#f00,stroke:#333,stroke-width:4px;style 114 fill:#f00,stroke:#333,stroke-width:4px;`",
                  ^
}

That's why you have a syntax error. Remove it in the data to fix the problem.

You must've copy-pasted the data INCLUDING the backticks from other code and forgot to remove them.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	hittingonme

'React Mermaid 9.0.1 flowchart graph: syntax error in graph data

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]