Envuelva la casilla de verificación en el elemento de etiqueta. Esto hará que se pueda hacer clic en el texto, es decir, "etiqueta" como parte de la entrada. Dado que los elementos de la label se display: inline , también deberá anular el CSS de display para mantenerlo como un elemento de nivel de bloque.

 <form onSubmit={handleSubmit}> {products.map((product) => ( <label key={product} style={{ cursor: "pointer", display: "block" }}> {product} <Checkbox name="products" value={product} checked={values.products.includes(product)} onChange={({ target }) => { let updatedProducts; if (values.products.includes(product)) { updatedProducts = values.products.filter( (product) => product !== target.value ); } else { updatedProducts = [...values.products, target.value]; } setFieldValue("products", updatedProducts); }} /> </label> ))} <button type="submit">Submit</button> </form>

Si desea que se pueda hacer clic en el nombre de su producto y cambiar el estado de la casilla de verificación, use una etiqueta con un htmlFor

Tendrías que hacer algunos cambios en tu aplicación de la siguiente manera:

 <label for={product}>{product}</label> <!-- ADD LABEL TAG AND FOR HERE! <!-- <Checkbox name="products" id={product} // <-- HAVE YOUR ID SAME WITH THE FOR ABOVE value={product} checked={values.products.includes(product)} onChange={({ target }) => { let updatedProducts; if (values.products.includes(product)) { updatedProducts = values.products.filter( (product) => product !== target.value ); } else { updatedProducts = [...values.products, target.value]; } setFieldValue("products", updatedProducts); }} />;

Y dentro del componente de Input :

 <Input type="checkbox" id={id} // <-- CHANGE ID TO USE ACTUAL ID ABOVE name={name} value={value} checked={checked} onChange={onChange} />;