Scatterplot breaks down unexpectedly. The @ant-design/charts library have many vulnerability issues that is causing the charts to break down unexpectedly🐛[BUG]

[ShanuKhosla]

🐛 bug 描述 [详细地描述 bug，让大家都能理解]

I am using the scatterplot from ant-design/charts. when i checked my terminal it said there are 18 high severity vulnerability issues related to the ant design charts library. i ran npm audit fix and then the next thing i realize is that my graph's ui(the axis and the points ) is gone and all tooltips of the points show null

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Scatter } from '@ant-design/plots';

const MainGraph = () => {

const data = [
{ x: 1, y: 4.181 },
{ x: 2, y: 4.665 },
{ x: 3, y: 5.296 },
{ x: 4, y: 5.365 },
{ x: 5, y: 5.448 },
{ x: 6, y: 5.744 },
{ x: 7, y: 5.653 },
{ x: 8, y: 5.844 },
{ x: 9, y: 6.362 },
{ x: 10, y: 6.38 },
{ x: 11, y: 6.311 },
{ x: 12, y: 6.457 },
{ x: 13, y: 6.479 },
{ x: 14, y: 6.59 },
{ x: 15, y: 6.74 },
{ x: 16, y: 6.58 },
{ x: 17, y: 6.852 },
{ x: 18, y: 6.531 },
{ x: 19, y: 6.682 },
{ x: 20, y: 7.013 },
{ x: 21, y: 6.82 },
{ x: 22, y: 6.647 },
{ x: 23, y: 6.951 },
{ x: 24, y: 7.121 },
{ x: 25, y: 7.143 },
{ x: 26, y: 6.914 },
{ x: 27, y: 6.941 },
{ x: 28, y: 7.226 },
{ x: 29, y: 6.898 },
{ x: 30, y: 7.392 },
{ x: 31, y: 6.938 },
];

const config = {
data,
xField: 'x',
yField: 'y',
size: 4,
pointStyle: {
stroke: '#050505',
lineWidth: 5,
fill: '#050505',
},
xAxis: {
title: {
text: 'Spectrum',
style: {
fill: '#ffffff',
fontSize: 20,
}
},
tickInterval: 1,
min: 0,
max: 10,
grid: {
line: null,
},
line: {
style: {
stroke: '#ffffff', // White color for x-axis line
}
},

},
yAxis: {
  title: {
    text: 'Fidelity',
    style: {
      fill: '#ffffff',
      fontSize: 20, // White color for y-axis label
    }
  },
  tickInterval: 0.25,
  min: 0,
  max: 7,
  grid: {
    line: null,
  },
  line: {
    style: {
      stroke: '#ffffff', // White color for y-axis line
    }
  },
},
tooltip: {
  showMarkers: false,
  enterable: true,
  domStyles: {
    'g2-tooltip': {
      width: '150px',
      padding: 0,
    },
  },
  customContent: (title, items) => {
    const data = items[0]?.data || {};
    const image = `<div ><img class = "tooltip-image" src=${data.link} alt=${data.category} /></div>`;
    const titleDom = `<div class ="tooltip-title-container"><p class="tooltip-title">${data.device_tech}</p></div>`;
    const deviceDescription = `<div class = "custom-tooltip-value"><p class="tooltip-para">${data.category}</p></div>`;

    return `<div className="tooltip-container">${titleDom}${deviceDescription}${image}</div>`;
  },
},

};

return (

<Scatter {...config} />

);
};

export default MainGraph;

this is my code. kindly ignore the data array since for now i have added a temporary data array and i can t show the real data array due to some reasons. kindly look into this issue

here is the npm audit report

npm audit report

d3-color <3.1.0
Severity: high
d3-color vulnerable to ReDoS - GHSA-36jr-mh4h-2g58
fix available via npm audit fix --force
Will install @ant-design/plots@2.0.7, which is a breaking change
node_modules/d3-color
@antv/g-lite *
Depends on vulnerable versions of d3-color
node_modules/@antv/component/node_modules/@antv/g-lite
node_modules/@antv/g-canvas/node_modules/@antv/g-lite
node_modules/@antv/g-lite
node_modules/@antv/g-plugin-canvas-path-generator/node_modules/@antv/g-lite
node_modules/@antv/g-plugin-canvas-picker/node_modules/@antv/g-lite
node_modules/@antv/g-plugin-canvas-renderer/node_modules/@antv/g-lite
node_modules/@antv/g-plugin-dom-interaction/node_modules/@antv/g-lite
node_modules/@antv/g-plugin-dragndrop/node_modules/@antv/g-lite
node_modules/@antv/g-plugin-html-renderer/node_modules/@antv/g-lite
node_modules/@antv/g-plugin-image-loader/node_modules/@antv/g-lite
node_modules/@antv/g2/node_modules/@antv/g-lite
@antv/g >=5.8.9
Depends on vulnerable versions of @antv/g-camera-api
Depends on vulnerable versions of @antv/g-dom-mutation-observer-api
Depends on vulnerable versions of @antv/g-lite
Depends on vulnerable versions of @antv/g-web-animations-api
node_modules/@antv/component/node_modules/@antv/g
node_modules/@antv/g
node_modules/@antv/g2/node_modules/@antv/g
@antv/component >=1.0.0-beta.1
Depends on vulnerable versions of @antv/g
node_modules/@antv/component
@antv/g2 >=5.0.17
Depends on vulnerable versions of @antv/component
Depends on vulnerable versions of @antv/g
Depends on vulnerable versions of @antv/g-canvas
Depends on vulnerable versions of @antv/g-plugin-dragndrop
node_modules/@antv/g2
@ant-design/plots >=2.0.0-alpha.0
Depends on vulnerable versions of @antv/g2
Depends on vulnerable versions of @antv/g2-extension-plot
node_modules/@ant-design/plots
@ant-design/charts >=2.0.3
Depends on vulnerable versions of @ant-design/plots
node_modules/@ant-design/charts
@antv/g2-extension-plot *
Depends on vulnerable versions of @antv/g
Depends on vulnerable versions of @antv/g2
node_modules/@antv/g2-extension-plot
@antv/g-camera-api *
Depends on vulnerable versions of @antv/g-lite
node_modules/@antv/component/node_modules/@antv/g-camera-api
node_modules/@antv/g-camera-api
node_modules/@antv/g2/node_modules/@antv/g-camera-api
@antv/g-canvas >=1.9.0
Depends on vulnerable versions of @antv/g-lite
Depends on vulnerable versions of @antv/g-plugin-canvas-path-generator
Depends on vulnerable versions of @antv/g-plugin-canvas-picker
Depends on vulnerable versions of @antv/g-plugin-canvas-renderer
Depends on vulnerable versions of @antv/g-plugin-dom-interaction
Depends on vulnerable versions of @antv/g-plugin-html-renderer
Depends on vulnerable versions of @antv/g-plugin-image-loader
node_modules/@antv/g-canvas
@antv/g-dom-mutation-observer-api *
Depends on vulnerable versions of @antv/g-lite
node_modules/@antv/component/node_modules/@antv/g-dom-mutation-observer-api
node_modules/@antv/g-dom-mutation-observer-api
node_modules/@antv/g2/node_modules/@antv/g-dom-mutation-observer-api
@antv/g-plugin-canvas-path-generator >=1.1.12
Depends on vulnerable versions of @antv/g-lite
node_modules/@antv/g-plugin-canvas-path-generator
@antv/g-plugin-canvas-picker <=1.0.0-alpha.32 || 1.1.8-alpha.0 - 1.6.0 || >=1.8.9
Depends on vulnerable versions of @antv/g-lite
Depends on vulnerable versions of @antv/g-plugin-canvas-path-generator
Depends on vulnerable versions of @antv/g-plugin-canvas-renderer
node_modules/@antv/g-plugin-canvas-picker
@antv/g-plugin-canvas-renderer 1.1.8-alpha.0 - 1.6.0 || >=1.7.15
Depends on vulnerable versions of @antv/g-lite
Depends on vulnerable versions of @antv/g-plugin-canvas-path-generator
Depends on vulnerable versions of @antv/g-plugin-image-loader
node_modules/@antv/g-plugin-canvas-renderer
@antv/g-plugin-dom-interaction >=1.7.12
Depends on vulnerable versions of @antv/g-lite
node_modules/@antv/g-plugin-dom-interaction
@antv/g-plugin-dragndrop >=1.6.12
Depends on vulnerable versions of @antv/g-lite
node_modules/@antv/g-plugin-dragndrop
@antv/g-plugin-html-renderer >=1.7.12
Depends on vulnerable versions of @antv/g-lite
node_modules/@antv/g-plugin-html-renderer
@antv/g-plugin-image-loader >=1.1.13
Depends on vulnerable versions of @antv/g-lite
node_modules/@antv/g-plugin-image-loader
@antv/g-web-animations-api *
Depends on vulnerable versions of @antv/g-lite
node_modules/@antv/component/node_modules/@antv/g-web-animations-api
node_modules/@antv/g-web-animations-api
node_modules/@antv/g2/node_modules/@antv/g-web-animations-api

**Here is the dev Dependencies in my project**

 "dependencies": {
"@ant-design/charts": "^2.0.3",
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@splinetool/react-spline": "^2.2.6",
"@splinetool/runtime": "^1.0.30",
"@tailwindcss/aspect-ratio": "^0.4.2",
"antd": "^5.15.1",
"clsx": "^2.1.0",
"daisyui": "^4.7.2",
"framer-motion": "^11.0.8",
"gsap": "^3.12.3",
"lodash": "^4.17.21",
"lucide-react": "^0.294.0",
"react": "^18.2.0",
"react-background-slider": "^3.0.0-0",
"react-calendly": "^4.3.0",
"react-dom": "^18.2.0",
"react-fast-marquee": "^1.6.2",
"react-parallax-tilt": "^1.7.214",
"react-scroll-parallax": "^3.4.5",
"react-scroll-progress-bar": "^1.1.13",
"react-tabs": "^6.0.2",
"react-tooltip": "^5.26.3",
"typescript": "^5.4.2"

},
"devDependencies": {
"@types/react": "^18.2.37",
"@types/react-dom": "^18.2.15",
"@vitejs/plugin-react": "^4.2.0",
"autoprefixer": "^10.4.16",
"eslint": "^8.53.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.4",
"postcss": "^8.4.32",
"tailwindcss": "^3.3.5",
"vite": "^5.0.0"
}

🚑 其他信息 [如截图等其他信息可以贴在这里]