Updating props passed to chart appends new chart instead of replacing.

[TaylorBelk1]

When you change props that are passed to the gauge, it appends a new chart instead of replacing the chart with the new one with new prop values. You end up with infinite charts on the page eventually.

The project I am working on uses a drop down menu, when you select a list item, a new chart is added. But it should replace the current gauge values with the new ones passed in.

Code:

export const Gauge: React.FC<IProps> = ({
  id,
  currentNumber,
  maxNumber,
  styleOverrides,
}) => {

  const getPercentage = (num: number, percentOf: number) => {
    const percent = (num / 100) * percentOf;
    if (percent > 1) return 1;
    return percent;
  };

  console.log(id)
  return (
    <>
      <GaugeChart
        id={id}
        nrOfLevels={maxNumber}
        percent={getPercentage(currentNumber ? currentNumber : 0, maxNumber)}
        textColor="#000"
        style={styleOverrides ? { ...styleOverrides } : { width: "100%" }}
        hideText={true}
      />
    </>
  );
};