Social proof section using REACT

Hi there, I have a question regarding the styling of components created dynamically:

• for the section with ratings and the section with the reviews, I created each <RatingItem> and each <ReviewItem> dynamically, mapping through an Array with all 3 ratings or reviews.
• through (props.id) I assigned an id to each "Item" in order to style each one individually (justify-self left + center + right for ratings and align-self start + center + end for the reviews).
• so in my CSS file I tried to select each Item by its #id, but it didn't work.
• I found a working solution using the :nth-child() pseudo-selector.

why can't I use the #id as such? or how can I use it correctly?

thanks in advance for any help