Este es un componente de revisión en React que muestra 5 estrellas y me gustaría poder hacerlo de modo que si hace clic en la estrella, establezca el estado de calificación en ese valor.

Sin embargo, esta función onClick no parece funcionar.

El registro de consola de e.target.value no está definido.

El registro de consola de e está devolviendo un objeto y en ese objeto hay un atributo "objetivo" con el elemento i fas fa-star enumerado pero e.target.value no está definido.

 const [rating, setRating] = useState(1) const setRatingHandler = (e) => { console.log(e) console.log(e.target.value) setRating(e.target.value) } <div onClick={(e) => setRatingHandler(e)} className="review-stars flex justify-self-start rating mb-6 ml-1"> <i className={rating >= 1 ? 'fas fa-star' : rating >= 0.5 ? 'fas fa-star-half-alt' : 'far fa-star'} value="1"></i> <i className={rating >= 2 ? 'fas fa-star' : rating >= 1.5 ? 'fas fa-star-half-alt' : 'far fa-star'} value="2"></i> <i className={rating >= 3 ? 'fas fa-star' : rating >= 2.5 ? 'fas fa-star-half-alt' : 'far fa-star'} value="3"></i> <i className={rating >= 4 ? 'fas fa-star' : rating >= 3.5 ? 'fas fa-star-half-alt' : 'far fa-star'} value="4"></i> <i className={rating >= 5 ? 'fas fa-star' : rating >= 4.5 ? 'fas fa-star-half-alt' : 'far fa-star'} value="5"></i> </div>

¿Algunas ideas?