我正在尝试在React中使用IGV.js，并发现以下代码创建了两个容器div，而不是一个：

var igvDiv = document.getElementById("igv-div");
var options =
{
    genome: "hg38",
    locus: "chr8:127,736,588-127,739,371",
    tracks: [
        {
            "name": "HG00103",
            "url": "https://s3.amazonaws.com/1000genomes/data/HG00103/alignment/HG00103.alt_bwamem_GRCh38DH.20150718.GBR.low_coverage.cram",
            "indexURL": "https://s3.amazonaws.com/1000genomes/data/HG00103/alignment/HG00103.alt_bwamem_GRCh38DH.20150718.GBR.low_coverage.cram.crai",
            "format": "cram"
        }
    ]
};

igv.createBrowser(igvDiv, options)
        .then(function (browser) {
            console.log("Created IGV browser");
        })

我的React代码是使用useRef更好：

import React, { useRef, useEffect, Component } from 'react';

import igv from 'igv';

var igvStyle = {
  fontFamily: 'open sans,helveticaneue,helvetica neue,Helvetica,Arial,sans-serif',
    paddingTop: '60px',
    margin: '5px'
  }
  class IGViewerSection extends Component {

    componentDidMount() {
      var igvContainer = document.getElementById('igv-div');
      var igvOptions = {
        genome: "hg38",
        locus: "chr8:127,736,588-127,739,371",
        tracks: [
            {
                "name": "HG00103",
                "url": "https://s3.amazonaws.com/1000genomes/data/HG00103/alignment/HG00103.alt_bwamem_GRCh38DH.20150718.GBR.low_coverage.cram",
                "indexURL": "https://s3.amazonaws.com/1000genomes/data/HG00103/alignment/HG00103.alt_bwamem_GRCh38DH.20150718.GBR.low_coverage.cram.crai",
                "format": "cram"
            }
        ]
    };
      return igv.createBrowser(igvContainer, igvOptions);
    }
  
    render() {
      return (
        <div id="igv-div" style={igvStyle}></div>
      );
    }
  }
  

export default IGViewerSection;

我想使用正确的方法在React中实现IGV.js。请您指导我如何正确地在React中实现IGV.js，以及如何修复