我如何在react的这个d3气泡图中输入我自己的数据？

import React, { useEffect, useRef } from 'react';
import * as d3 from 'd3';

const BubbleChart = ({ data }) => {
  const svgRef = useRef(null);

  useEffect(() => {
    const svg = d3.select(svgRef.current);

    // 设置SVG容器的宽度和高度
    const width = 500;
    const height = 300;
    svg.attr('width', width).attr('height', height);

    // 准备数据
    // 假设data是一个包含气泡属性的数组，如[{ radius: 10, color: 'red', x: 50, y: 50 }, ...]
    // 这里只是一个示例，实际应根据自己的数据结构进行处理
    const bubbles = svg.selectAll('.bubble').data(data);

    // 创建比例尺
    const xScale = d3.scaleLinear().domain([0, 100]).range([0, width]);
    const yScale = d3.scaleLinear().domain([0, 100]).range([0, height]);

    // 创建气泡
    bubbles
      .enter()
      .append('circle')
      .attr('class', 'bubble')
      .attr('cx', d => xScale(d.x))
      .attr('cy', d => yScale(d.y))
      .attr('r', d => d.radius)
      .attr('fill', d => d.color);

    // 添加交互效果（可选）
    bubbles.on('mouseover', (event, d) => {
      // 鼠标悬停时的操作
    });

    // 渲染图表
    // 这里只是一个示例，实际应根据自己的需求进行渲染
    svg.append('text').text('Bubble Chart').attr('x', 10).attr('y', 20);
  }, [data]);

  return <svg ref={svgRef}></svg>;
};

export default BubbleChart;