URL Shortening built with React, TailwindCSS, Vite

I did encountered a weird issue.

I have this dynamic styling that I made but it somehow kinda buggy(?) top-${index * 10}

const FEATURES = [
{
id: "1",
title: "Brand Recognition",
...
},
{
id: "2",
title: "Detailed Records",
...
}, 
{
id: "3",
title: "Fully Customizable",
...
}
];

FEATURES.map((feature, index) => (
<li
key={feature.id}
className={`relative top-${index * 10}`}
>
...
</li>
));

By this logic, it supposed to render with the following sequences: [0]top-0 [1]top-10 [2]top-20, but sometimes the second item rendered with the same top position as the first item, but the third item is always rendered correctly. I have checked on TailwindCSS and the top positions are valid util class.

Been debugging this for a while now, and decided to make it render individually instead of dynamically and it works like a charm.

Did I miss anything to make it rendered dynamically properly? Anyone know why and how did this happens?

Thank you!