Как мне исправить эти смещения?

Question

Моя команда и я работаем в программе Microsoft TNT, и мы создали веб-приложение для борьбы с дезинформацией. Его составляющая связана с рейтингом новостных статей по различным критериям. Проблема в том, что я хочу, чтобы звезды выровнялись по горизонтали, а звезды были окрашены при нажатии, а не кнопки (честно говоря, я не уверен, почему кнопки вообще там). Кроме того, в объективной части звезды находятся вне плитки (опять же не знаю, как это произошло). Я был бы признателен за то, чтобы кто-нибудь помог сделать звезды горизонтальными, избавиться от кнопок, и вместо этого звезды должны окрашиваться при нажатии, а для части «Цель» звезды должны быть внутри плитки. Я включил изображения, css и файлы tsx, чтобы помочь визуализировать эти смещения. (Я новичок в TypeScript + React, поэтому у меня ограниченные знания по этому поводу)

Tsx файл:

import React, { useState } from "react";
import { FaStar } from "react-icons/fa";
 
const StarRating = () => {
 const [rating, setRating] = useState(0);
 
 return (
 
 <div>
 {[ ... Array(5)].map((star, i) => {
 const ratingValue = i + 1;
 
 return(
 
 <label>
 <input
 type="radio"
 name="rating"
 value={ratingValue}
 onClick={() => setRating(ratingValue)}
 
 />
 <FaStar className="star"
 color={ratingValue <= rating ? "#ffc107" : "#e4e5e9"}
 size={20} />
 </label>
 )
 
 
 })}
 </div>
 );
};
 
export default StarRating;

Css файл:

.StarRating {
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 100vh;
 flex-direction: row;
 
}
 
input[type = "radio"]{
 display: none;
}
 
.star {
 display: flex;
 cursor: pointer;
 transition: color 200ms;
}

Изображения: Звезды по вертикали Звезды вне плитки