Properties not being passed in returned component

Question

I have an issue with a component (not sure if it's the component tho) I have a shape component that takes some props and passes them as style to a div. I have 2 boxes and 2 arrays with those shapes as objects, I map over those to return the component with the right props. However, only one is showing up because only one has the width, the others have height and the rest of the properties but no width... (It was working earlier and they where showing up, then they just vanished). Here is the code: the component:

import styled from "styled-components"

const sizes = {
  extraSmall: { width: "37,5%", height: "25%" },
  small: { width: "37,5%", height: "50%" },
  medium: { width: "62,5%", height: "50%" },
  large: { width: "100%", height: "100%" }
}

const borders = {
  none: "0px",
  small: "40px",
  medium: "100px",
  large: "100%"
}

export interface ShapeProps {
  id: string
  color: string
  size: "extraSmall" | "small" | "medium" | "large"
  radius: "none" | "small" | "medium" | "large"
  top: string
  left: string
}

const Square = styled.div`
  background-color: ${(props) => props.color};
  position: absolute;
`

export default function Shape({ color, size, radius, top, left }: ShapeProps) {
  const style: React.CSSProperties = {
    width: sizes[size].width,
    height: sizes[size].height,
    borderRadius: borders[radius],
    top,
    left
  }

  return (
    <>
      <Square color={color} style={style} />
    </>
  )
}

the app file:

import Shape, { ShapeProps } from "./components/shape/shape"

const colors = {
  1: "#264653",
  2: "#2A9D8F",
  3: "#E9C46A",
  4: "#F4A261",
  5: "#E76F51",
  6: "#EC8C74",
  7: "#f5c4b7"
}

const shapesArray1: ShapeProps[] = [
  { id: "1eds", color: colors[7], size: "small", radius: "none", top: "0%", left: "0%" },
  { id: "2fd", color: colors[2], size: "small", radius: "none", top: "50%", left: "62%" },
  { id: "3dze", color: colors[3], size: "medium", radius: "none", top: "50%", left: "0%" },
  { id: "4ngn", color: colors[4], size: "medium", radius: "none", top: "0%", left: "38%" }
]

const shapesArray2: ShapeProps[] = [
  { id: "5cxwc", color: colors[5], size: "extraSmall", radius: "none", top: "0%", left: "0%" },
  { id: "6cvz", color: colors[6], size: "medium", radius: "none", top: "0%", left: "0%" },
  { id: "7nvbf", color: colors[1], size: "large", radius: "none", top: "0%", left: "0%" }
]

function App() {
  return (
    <div className='App'>
      <div className='box1'>
        {shapesArray1.map((shape) => (
          <Shape key={shape.id} {...shape} />
        ))}
      </div>
      <div className='box2'>
        {shapesArray2.map((shape) => (
          <Shape key={shape.id} {...shape} />
        ))}
      </div>
    </div>
  )
}

export default App

the global css:

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.App {
  width: 50vw;
  height: 55vh;
  padding: 1rem;
  background-color: cornflowerblue;
  display: flex;
}

.box1,
.box2 {
  width: 50%;
  height: 100%;
  display: flex;
  position: relative;
}

Someone assist me with what's wrong.

Answer 1

I think the widths in the sizes object values should not have commas. If you change to dot might work.