Interactive Rating Component with CSS Nesting and JavaScript

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

I am pretty proud of completing this challenge because it is helping me get even more comfortable with HTML, CSS, and JavaScript.

What specific areas of your project would you like help with?

I had an initial problem when it came to getting the value associated with the radio button in JavaScript. What I did in my CSS was to put a display: none for the input tag and then style my label based on the design file.

In my JavaScript I did the following to retrieve the value:

const ratingOptions = document.querySelectorAll('input[name="rating"')
function getRating() {
  ratingOptions.forEach(e => {
    if (e.checked) {
       return e.value
     }
  }
}

button.addEventListener('click', () => {
  let value = getRating() 
  ... rest of code where I get the element associated for the rating and replace with the value variable
}

However, I found that I kept getting undefined after I clicked the submit button. What could be causing the undefined value?