feat: add unique key prop to g

src/RaceChart.tsx

@@ -1,5 +1,6 @@
 import { FC, useEffect, useState } from "react";
 import { PlayerRanking } from "./types";
+import { useSession } from "./Session";
 
 interface RaceChartProps {
   players: PlayerRanking[];
@@ -34,13 +35,13 @@ const RaceChart: FC<RaceChartProps> = ({ players, std }) => {
   const gap = 8;
   const maxValue = Math.max(...players.map((player) => player.rank)) + 1;
   const barHeight = (height - 2 * padding) / players.length;
-  const fontSize = Math.min(barHeight - 1.5 * gap, width / 20);
+  const fontSize = Math.min(barHeight - 1.5 * gap, width / 22);
 
   return (
-    <svg width={width} height={height}>
+    <svg width={width} height={height} id="RaceChartSVG">
       {players.map((player, index) => (
         <rect
-          key={index}
+          key={String(index)}
           x={0}
           y={index * barHeight + padding}
           width={(1 - player.rank / maxValue) * width}
@@ -50,7 +51,7 @@ const RaceChart: FC<RaceChartProps> = ({ players, std }) => {
       ))}
 
       {players.map((player, index) => (
-        <g>
+        <g key={"group" + index}>
           <text
             key={index + "_name"}
             x={4}