A Star Rating component

import { useState } from 'react';
import { MdStar } from 'react-icons/md';
import { CgSpinner } from 'react-icons/cg';
 
export const RatingComponent = ({ init, onRatingChange, loading }) => {
  const [hover, setHover] = useState(null);
  return (
    <>
      <div className="flex min-h-screen items-center justify-center">
        {[...Array(5)].map((star, starIndex) => {
          return (
            <label key={starIndex + 1}>
              <input
                className="hidden"
                type="radio"
                value={init}
                onClick={() => {
                  onRatingChange(starIndex + 1);
                  setHover(null);
                }}
              />
              <MdStar
                className="cursor-pointer transition duration-500 ease-in-out"
                size="4rem"
                color={starIndex + 1 <= (hover || init) ? '#ffc107' : '#dedede'}
                onMouseEnter={() => {
                  setHover(starIndex + 1);
                }}
                onMouseLeave={() => {
                  setHover(null);
                }}
              />
            </label>
          );
        })}
        <div className="flex items-center justify-center p-2">
          <p className="w-15 rounded-xl border-2 p-4 text-4xl ">{init}</p>
        </div>
        <div>
          <CgSpinner
            size="3rem"
            className={loading ? 'animate-spin' : 'invisible'}
          />
        </div>
      </div>
    </>
  );
};