I am trying to insert this Trading view script into my react project: https://www.tradingview.com/widget/market-overview/

This is my component:

import React, { useEffect } from "react";
import "./LiveCoinWatch.css";

export default function LiveCoinWatch() {
  const src = "https://s3.tradingview.com/external-embedding/embed-widget-market-overview.js";

  useEffect(() => {
    const script = document.createElement("script");
    script.src = src;
    script.async = true;
    script.innerHTML = {
  colorTheme: "dark",
  dateRange: "1M",
  showChart: true,
  locale: "en",
  width: "100%",
  height: "100%",
  largeChartUrl: "",
  isTransparent: true,
  showSymbolLogo: true,
  showFloatingTooltip: false,
  plotLineColorGrowing: "rgba(255, 229, 153, 1)",
  plotLineColorFalling: "rgba(180, 167, 214, 1)",
  gridLineColor: "rgba(0, 0, 0, 0)",
  scaleFontColor: "rgba(120, 123, 134, 1)",
  belowLineFillColorGrowing: "rgba(180, 167, 214, 0.12)",
  belowLineFillColorFalling: "rgba(255, 229, 153, 0.12)",
  belowLineFillColorGrowingBottom: "rgba(41, 98, 255, 0)",
  belowLineFillColorFallingBottom: "rgba(41, 98, 255, 0)",
  symbolActiveColor: "rgba(217, 210, 233, 0.12)",
  tabs: [
    {
      title: "TestPage",
      symbols: [
        {
          s: "BITSTAMP:BTCUSD",
        }
      ],
    },
  ],
};

document.body.appendChild(script);

return () => {
  document.body.removeChild(script);
};
}, [src]);

return (
<div class="tradingview-widget-container">
  <div class="tradingview-widget-container__widget"></div>
</div>
  );
}

I tried to get element by id and to remove his child. Btw i dont know why should i remove the child div after using this. I tried to make a new div and to append and remove the child from it, but i got this error:

NotFoundError: Node.removeChild: The node to be removed is not a child of this node

Thanks everyone who would help!