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

I have checkbox and its working well. However I wanted the whole div to be clickable also not just the checkbox alone.

Pls check here CLICK HERE

<form onSubmit={handleSubmit}>
      {products.map((product) => (
        <div key={product} style={{ cursor: "pointer" }}>
          {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);
            }}
          />
        </div>
      ))}
      <button type="submit">Submit</button>
    </form>