Make Whole Div Clickable in React

Wrap the checkbox in label element. This will make the text, i.e. "label" clickable as part of the input. Since label elements are display: inline you will need to also override the display CSS to maintain it as a block level element.

<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>

If you want to have your product name clickable and change checkbox state, use a label with an htmlFor

You would need to make a few changes to your app like so:

<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);
  }}
/>;

And inside Input component:

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