Best way to make a React 'edit' form with radio buttons?

So I don’t see many React questions on here, but after seeing a lot of dated or way too esoteric examples other places, I figured this is worth a shot.

I’ve got a meal tracker app where you can add or delete a meal. I’m using an “uncontrolled” component for the add form, with refs. It works and allows me to save the entry. But now I’d like to be able to edit/update and resave entries.

I’ve looked at a few tutorials for edit forms, but can’t get the radio buttons to work. People seem to like having one of the radio options pre-checked, but I don’t want that in this case…I want what the user initially selected to show.

So I guess my questions are…

  1. Should I use controlled or uncontrolled components for these forms? Can you mix and match? I’d rather not alter my code too much…

  2. What is the proper way to get the radio button selected and resaved? I saw that you can do event.target.checked (as opposed to event.target.value), but I am not sure how to connect the inputs. The problem with radio buttons is that they are boolean values. They default to false; when you mark one off, it’s true, and the others remain false. The app is connected to a MongoDB database, and in the model for Meal I’ve got healthy: Boolean, semihealthy: Boolean, etc.

Here is my code: Glitch :・゚✧