reactjs - createChart 正在渲染 2 个画布

Question

反应组件：

import { useRef, useEffect, useState } from 'react';
import { createChart } from 'lightweight-charts';
import { formatData } from './helpers/formatData';
import axios from 'axios';
import './App.css';

const App = () => {
    const [data, setData] = useState();
    const [loading, setLoading] = useState(true);
    const chartRef = useRef();

    useEffect(() => {
        console.log('render');
        getData();
    }, []);

    const getData = async () => {
        setLoading(true);
        await axios
            .get(
                'https://api.coingecko.com/api/v3/coins/bitcoin/market_chart?vs_currency=usd&days=7'
            )
            .then(res => setData(formatData(res.data.prices)));
        setLoading(false);
    };

    if (!loading) {
        const chart = createChart(chartRef.current, { width: 400, height: 300 });
        const lineSeries = chart.addLineSeries();
        lineSeries.setData(data);
    }

    return (
        <div className="container">
            <div ref={chartRef} className="chart"></div>
        </div>
    );
};

export default App;

格式数据函数：

export const formatData = response => {
    return response.map(el => ({
        time: el[0],
        value: el[1]
    }));
};

每当我保存文档时，屏幕上的画布数量就会增加一倍。如果我重新加载，它会回到 2。在谷歌上找不到任何信息。任何帮助，将不胜感激。