Как создать реагирующий функциональный компонент из стандартного элемента javascript

Question

и спасибо за чтение. Я никогда не узнал о мосте, который «соединяет, но разделяет» Javascript и JSX. Как мне преобразовать HTML-компонент JavaScript в реактивный компонент, как это было сделано внизу.

<div class="tradingview-widget-container">
    <div id="tradingview_ae2c6"></div>
    <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/NASDAQ-AAPL/" rel="noopener" target="_blank"><span class="blue-text">AAPL Chart</span></a> by TradingView</div>
    <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
    <script type="text/javascript">
        new TradingView.widget(
  {
            "width": 980,
        "height": 610,
        "symbol": "NASDAQ:AAPL",
        "interval": "D",
        "timezone": "Etc/UTC",
        "theme": "Light",
        "style": "1",
        "locale": "en",
        "toolbar_bg": "#f1f3f6",
        "enable_publishing": false,
        "allow_symbol_change": true,
        "container_id": "tradingview_ae2c6"
      }
        );
  </script>
</div>

преобразовать это в

import React from 'react'
import * as TradingView from 'https://s3.tradingview.com/tv.js'

export default function Api() {
    const options = {
        "width": 980,
        "height": 610,
        "symbol": "NASDAQ:AAPL",
        "interval": "D",
        "timezone": "Etc/UTC",
        "theme": "Light",
        "style": "1",
        "locale": "en",
        "toolbar_bg": "#f1f3f6",
        "enable_publishing": false,
        "allow_symbol_change": true,
        "container_id": "tradingview_ae2c6"
    }
    const chart = new TradingView.widget({ options })
    return (
        <div class="tradingview-widget-container">
            {chart}
        </div>
    )
}