I don't understand how/why this is working

Hi - I have the very strange problem of getting exactly the results that I want from my code, but am unable to understand WHY it’s working.

These are steps to recreate issue:

  1. Open site: https://recipe-project.netlify.app/
  2. Change dropdown to Produce, then check boxes for onion, tomato.
  3. Change dropdown to Spices, then check boxes for paprika.
  4. Change dropdown to Produce.

Expected: onion, tomato should still be checked.
Actual: Working as expected, yay!!

My problem: according to my code, whenever the drop down is changed, technically, the state that holds the checked value of each ingredient SHOULD be overwritten each time. But it’s not. And I can’t tell why. (I spent the last couple of hours debugging this “overwriting problem” that turns out to not exist. I noticed it was not a problem once I deleted all my fixes in order to start from scratch).

Not the usual sort of problem I have, but am nervous about “fixing” things without really understanding how.

Thanks!