css - Propiedad de componente con estilo dentro de un map

Estoy intentando calcular el ancho del SVG basado en un valor de prop. Es un array de SVG y cada uno debería tener un ancho específico. Está calculando perfectamente el valor del ancho, pero está repitiendo el primer valor del map para todos los demás. Cuando hago console.log del valor dentro del map, muestra valores diferentes para cada uno.

Aquí está el mapa:

  {example.map(v => (
              <ComponentExample value={v.value} />
   ))}

Aquí está el componente con estilo recibiendo la propiedad:

const ComponentExample = styled(ExampleSVG)<{ value: number; }>`
width: ${props => (props.value * 100) / 5}%;`;

Respuesta #1

He intentado reproducirlo en CodeSandbox y no pude.

 {widths.map((value) => (
    <Box key={`key-${value}`} value={value}>
      Hi! I'm a box with {(value * 100) / 5}% width.
    </Box>
  ))}

• no olvides agregar la key en el componente del mapa.
• si tus valores son mayores que 5, entonces tendrás valores mayores que 100% para el ancho, tal vez usa rem, px en lugar de %