I'm trying to calculate the svg width based on a prop value. It's an array of svg and each one should have a specific width. It is perfectly calculating the width value but it's repeating the first value of the map for all others. When I console.log the value inside the map it shows different values for each one.
Here's the map:
{example.map(v => (
<ComponentExample value={v.value} />
))}
Here's the styled component receiving prop:
const ComponentExample = styled(ExampleSVG)<{ value: number; }>`
width: ${props => (props.value * 100) / 5}%;`;