Interactive Rating Component using React JS, TypeScript & Tailwind CSS

What are you most proud of, and what would you do differently next time?

Adding some conditional logic for the element current state, if it is clicked or not.

{
  ratings.map((rating, index) => {
    // Check if this rating is selected
    const isSelected = selectedRatingIndex === index

    // Set the background color based on selection
    const bgColor = isSelected
      ? "bg-custom-orange cursor-"
      : "bg-dark-gray hover:bg-custom-white"

    // Set the text color based on selection
    const textColor = isSelected
      ? "text-black"
      : "text-light-gray group-hover:text-black"

    // This will output after conditional logic statement
    return (
       {
          setSelectedRatingIndex(index)
          onSelectRating(rating)
        }}
      >
        {rating}
      
    )
  })
}

What challenges did you encounter, and how did you overcome them?

At first, I am not familiar how does TypeScript works. But I overcome it by watching several tutorials via Youtube.