Fixing extraneous errors with html attrs

src/components/atoms/ColoredMarkers.js

@@ -39,7 +39,7 @@ function ColoredMarkers({ radius, colorPercentMap, styles, className }) {
 
         return (
           <path
-            class={className}
+            className={className}
             id={`arc_${idx}`}
             d={arc}
             style={extraStyles}

src/components/space/carto/atoms/Clusters.js

@@ -110,19 +110,19 @@ function ClusterEvents({
     return (
       <>
         <text
-          text-anchor="middle"
+          textAnchor="middle"
           y="3px"
           style={{ fontWeight: "bold", fill: "black", zIndex: 10000 }}
         >
           {txt}
         </text>
         <circle
-          class="event-hover"
+          className="event-hover"
           cx="0"
           cy="0"
           r={circleSize + 2}
           stroke={colors.primaryHighlight}
-          fill-opacity="0.0"
+          fillOpacity="0.0"
         />
       </>
     );

src/components/space/carto/atoms/Events.js

@@ -35,12 +35,12 @@ function MapEvents({
     return (
       <>
         <circle
-          class="event-hover"
+          className="event-hover"
           cx="0"
           cy="0"
           r="10"
           stroke={colors.primaryHighlight}
-          fill-opacity="0.0"
+          fillOpacity="0.0"
         />
       </>
     );