Using APIs to render the widget?

Hi team,

I'm trying to render the received HTML from the API in the react app (nextjs). But it is not loading. It is currently showing blank at the moment.

Event if I remove the display none, the styling is not corrected. Can anyone please help me with that?

Using 3 APIs:

https://judge.me/api/docs#tag/Other-Widgets/operation/widgets#html_miracle

https://judge.me/api/docs#tag/Other-Widgets/operation/widgets#settings

https://judge.me/api/docs#tag/Main-Widgets/operation/widgets#product_review

My sample react code:

import React, { useEffect, useState } from "react";
const HtmlToReact = require("html-to-react");

export const ProductReview = ({
  productId,
  theme
}: {
  productId: string;
  theme: any;
}) => {
  const [html, setHtml] = useState("");
  const [html2, setHtml2] = useState("");
  const [html3, setHtml3] = useState("");

  const parser = new HtmlToReact.Parser();

  const getReview = async () => {
    const res2 = await fetch(
      "https://judge.me/api/v1/widgets/settings?shop_domain=" +
        process.env.NEXT_PUBLIC_JUDGE_ME_STOREFRONT_DOMAIN +
        "&api_token=" +
        process.env.NEXT_PUBLIC_JUDGE_ME_PUBLIC_TOKEN
    );

    setHtml2(parser.parse((await res2.json()).settings));
    console.log(html2);

    const res3 = await fetch(
      "https://judge.me/api/v1/widgets/html_miracle?shop_domain=" +
        process.env.NEXT_PUBLIC_JUDGE_ME_STOREFRONT_DOMAIN +
        "&api_token=" +
        process.env.NEXT_PUBLIC_JUDGE_ME_PUBLIC_TOKEN
    );

    setHtml3(parser.parse((await res3.json()).html_miracle));
    console.log(html3);

    const res = await fetch(
      "https://judge.me/api/v1/widgets/product_review?shop_domain=" +
        process.env.NEXT_PUBLIC_JUDGE_ME_STOREFRONT_DOMAIN +
        "&api_token=" +
        process.env.NEXT_PUBLIC_JUDGE_ME_PUBLIC_TOKEN +
        "&external_id=" +
        productId
    );

    console.log("response received");

    const result = await res.json();

    setHtml(result?.widget);
  };

  useEffect(() => {
    getReview();
  }, []);

  return (
    <div className={theme}>
      <div className="container mx-auto px-4 block">
        <div>
          {html2}
          {html3}
        </div>
        <div dangerouslySetInnerHTML={{ __html: html }}></div>
    </div>
)