How to validate >1 checkbox that was created with Array.prototype.map(), yet at the same time, only show an error message once? Codesandbox inside.

[havesomeleeway]

Hey everyone, I've been stuck on this for awhile and I've tried to describe my situation as best as I can via the title. What I have on my hands is...

I need to

• Have a component which allows me to map a bunch of strings into checkboxes (I've done this)
• If none of the checkboxes are selected, the validation should show "Select at least one option" (I've done this too)
• The error message should only show once and not across all the checkboxes (I'm failing here and this is where it all falls apart)

I have a Codesandbox example with two JS files. https://codesandbox.io/s/elegant-mopsa-0jzvl?file=/src/App.js

App.js - My own implementation based on the example given in Formik's tutorial. I can't get the error message to show at all.

Formik.js - Formik's implementation, the error messages show, but they appear across all checkboxes

Any help would be appreciated!