TradingView widget, advanced chart, not showing in React - reactjs

Question

I am trying to implement the Advanced chart widget of TradingView in my web application, that is created in React/Javascript, using primereact. I have tried several options before, and the only thing that worked so far was by importing the TradingViewEmbed from "react-tradingview-embed". Unfortunately it only worked with the old version "1.0.2", that has the old advertisement bar in it and also the banner below.
In order to remove those and implement it the way TradingView states I have done the below:
import React, { useEffect } from "react";
import './market-data.css';
const MarketData = () => {
const useScript = url => {
useEffect(() => {
const script = document.createElement('script');
script.src = url;
script.async = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
}
}, [url]);
};
return (
<div className="tradingview-widget-container">
{useScript('https://s3.tradingview.com/tv.js')}
<div id="tradingview_dc023"></div>
<div className="tradingview-widget-copyright"></div>
<script type="text/javascript" nonce>
{
new window.TradingView.widget(
{
autosize: true,
symbol: "FX_IDC:EURUSD",
timezone: "Europe/Amsterdam",
theme: "dark",
style: "2",
enable_publishing: false,
hide_top_toolbar: false,
hide_legend: false,
withdateranges: true,
range: "1D",
hide_side_toolbar: true,
allow_symbol_change: true,
save_image: false,
watchlist: [
"FX_IDC:EURUSD",
"FX_IDC:EURGBP",
"FX_IDC:EURJPY"
],
details: true,
hotlist: false,
calendar: true,
studies: [],
height: "100%",
width: "100%",
container_id: "tradingview_dc023"
})
}
</script>
</div>
)
}
export default MarketData;
Looking at the inspect of the web application it looks fine to me, but the chart/widget is just not showing.
tv.js is loaded:
tv.js
script is loaded and shows the way TradingView states on its website:
script
Could anybody please help and direct me in the right way of fixing this?