React ErrorBoundary problem when adding css on the html fetched from Wordpress API

I am trying to run the following code:

<div className="w-full py-8 content">
  <div
    className="mb-5 text-3xl font-bold"
    dangerouslySetInnerHTML={{
      __html: v.title.rendered,
    }}
  ></div>
  <div
    dangerouslySetInnerHTML={{
      __html: v.content.rendered,
    }}
    style={v.customCSS}
  ></div>
</div>;

the content.rendered and title.rendered are from the WordPress API, on https://wordpress.org/support/topic/customcss-in-json-api-missing/, it shows how to add customCSS for particular posts on WordPress, which where customCSS is from.

the WordPress API is

"title": {
      "rendered": "Is There a Perfect Stock Portfolio?"
    },
"content": {
      "rendered": "\n<p class=\"ticss-31fd2b8f has-normal-font-size\"><strong><u>By Naman Jain</u></strong></p>\n\n\n\n<p class=\"ticss-aacd3f3c has-normal-font-size\">A primary goal of many investors will be to have a so-called ‘perfect’ stock portfolio, one which optimises potential reward for the risk being taken on by the investor. It should of course be noted that even in a stable environment, it is hard to define what a so-called ‘perfect stock portfolio’ is, given that there are so many different exposures available, and a huge amount of data and company information to be digested. What might appear to be the ‘perfect’...
},
"customCSS": ".ticss-aacd3f3c {\n  color:red;\n}\n",

however, the console of the website gives me an error:

The above error occurred in the <div> component:

    at div
    at div
    at div
    at div
    at Container (webpack-internal:///./components/Container.js:15:23)
    at div
    at div
    at div
    at div
    at div
    at div
    at div
    at div
    at Container (webpack-internal:///./components/Container.js:15:23)
    at div
    at Overview (webpack-internal:///./components/Dashboard/Overview.js:51:66)
    at Dashboard
    at Layout (webpack-internal:///./components/Layout.js:28:23)
    at AuthContextProvider (webpack-internal:///./Auth/AuthContext.js:40:23)
    at MyApp (webpack-internal:///./pages/_app.js:31:24)
    at Provider (webpack-internal:///./node_modules/react-redux/es/components/Provider.js:16:20)
    at Wrapper (webpack-internal:///./node_modules/next-redux-wrapper/es6/index.js:209:40)
    at ErrorBoundary (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:26:47)
    at ReactDevOverlay (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:86:23)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:254:5)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:750:24)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:889:25)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

Is there a way to fix this?