This is a Review component in React that shows 5 stars and I'd like to be able to make it so if you click on the star, it's sets the Rating state to that value.

However, this onClick function doesn't seem to work.

Console log of e.target.value is undefined.

Console log of e is returning an object and on that object there's "target" attribute with the i fas fa-star element listed but e.target.value is undefined.

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>

Any ideas?