Formik check all checkboxes - reactjs

Question

The below code is checking the checkboxes one at a time each time select-all is clicked.
I've used the same code in SelectAllStudents elsewhere in my application not using Formik and it works fine. It processes each item in checkboxes.forEach but only checks the last item in the list on each click and I need to know how to get this to check all on a single click
const selectAllStudents = (contactType: string) => {
const checkboxes = document.querySelectorAll("#studentEmail");
var nativeInputValueSetter = Object?.getOwnPropertyDescriptor(
window.HTMLInputElement.prototype,
"checked"
)?.set;
checkboxes.forEach((checkbox) => {
nativeInputValueSetter?.call(checkbox, true);
let event = new Event("click", { bubbles: true })
checkbox.dispatchEvent(event);
});
})
this is the return markup from <StudentCheckBoxes / >
{students!.map((student, idx) => {
return (
<div key={idx+student.personId}>
<div className="inline-flex items-center">
<Field
type="checkbox"
className="w-4 h-4"
value={student.studentId.toString()}
name={"students"}
id={"studentEmail"}
/>
<span className="ml-2 text-sm">
{student.preferredName} {student.surname}
</span>
</div>
</div>
);
})}
Initial part of the form up to the select-all button
return (
<div>
<Formik
initialValues={initialValues}
onSubmit={onSubmit}
validateOnChange={true}
validationSchema={validationSchema}
className="text-gray-700"
>
{({ values, errors }) => (
<Form className="container pl-1 pr-3 pb-3 mx-auto">
{/* uncomment below to output form and error values */}
<pre>{JSON.stringify(values, null, 2)}</pre>
<pre>{JSON.stringify(errors, null, 2)}</pre>
<div className="flex-col text-center w-full mb-6 hidden 2xl:block">
<h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">
Email
</h1>
<p className="">Send E-Mail to Group</p>
</div>
{!loadingStudents && filteredStudents.length > 0 && (
<div className="grid grid-cols-2 mb-3">
<StudentCheckboxes students={students} contactType={contactType} />
</div>
)}
<div className="mb-2 ml-3 text-error-red error">
{errors.students}
</div>
<p onClick={() => selectAllStudents(contactType)} className="mb-4 text-sm underline cursor-pointer">Select All</p>