Using Formik on IndexTable with editable fields

Question

I am trying to come up with a list that has an editable Quantity field. Here's what I have now.

As you can see, I'm unable to map the Quantity field. The values there comes from Shopify's ResourcePicker. It does not have a quantity so I manually update the object to set a default quantity of 1. This quantity should be editable as seen in the screenshot above.

Here's the code that I currently have.

import { Button, Icon, IndexTable, TextField } from '@shopify/polaris'
import { Form, Formik } from 'formik'
import { MobilePlusMajor } from '@shopify/polaris-icons'
import { ResourcePicker } from '@shopify/app-bridge-react'
import { useEffect, useState } from 'react'

function SelectProducts({ form, dispatch }) {
  const [isProductPickerOpen, setIsProductPickerOpen] = useState(false)
  const [showProducts, setShowProducts] = useState(false)

  const [chosenProducts, setChosenProducts] = useState([])

  const productPickerOnSelectHandler = (selectPayload) => {
    setIsProductPickerOpen(false)

    // Add quantity to selection
    const updatedSelection = selectPayload.selection.map((product) => {
      const variants = product.variants.map((variant) => ({
        ...variant,
        quantity: 1,
      }))
      return {
        ...product,
        variants,
      }
    })

    setChosenProducts(updatedSelection)
  }

  useEffect(() => {
    if (!chosenProducts) return

    dispatch({
      type: 'SET_PRODUCT_SELECTION_DATA_ON_CREATE_SUBSCRIPTION',
      payload: chosenProducts,
    })
  }, [chosenProducts, dispatch])

  const productPickerOnCancelHandler = () => {
    setIsProductPickerOpen(false)
  }

  useEffect(() => {
    if (
      form.productSelectionData &&
      Object.keys(form.productSelectionData).length > 0
    ) {
      setShowProducts(true)
    } else {
      setShowProducts(false)
    }
  }, [form])

  return (
    <>
      {showProducts ? (
        <Formik initialValues={form.productSelectionData}>
          {({ setFieldValue, values, errors, isSubmitting }) => (
            <Form>
              <IndexTable
                resourceName={{
                  singular: 'product',
                  plural: 'products',
                }}
                onSelectionChange={() => {
                  console.log('selection changed.')
                }}
                headings={[
                  { title: 'Product' },
                  { title: 'Quantity' },
                  { title: 'Price' },
                  { title: 'Subtotal' },
                ]}
                emptyState={null}
                itemCount={1}
              >
                {values.map((product, pIndex) =>
                  product.variants?.map((variant, vIndex) => (
                    <IndexTable.Row
                      id={variant.id}
                      key={variant.id}
                      position={vIndex}
                    >
                      <IndexTable.Cell fontWeight="bold">
                        <div onClick={(e) => e.stopPropagation()}>
                          {variant.displayName}
                        </div>
                      </IndexTable.Cell>
                      <IndexTable.Cell>
                        <TextField
                          type="number"
                          value={variant.quantity}
                          onChange={(value) => {
                            console.log('got in here')
                            setFieldValue(
                              `products[${pIndex}].variants[${vIndex}].quantity`,
                              value
                            )
                          }}
                        />
                      </IndexTable.Cell>
                      <IndexTable.Cell>
                        <div onClick={(e) => e.stopPropagation()}>
                          {variant.price}
                        </div>
                      </IndexTable.Cell>
                      <IndexTable.Cell>
                        <div onClick={(e) => e.stopPropagation()}>
                          {Number(variant.quantity * variant.price)}
                        </div>
                      </IndexTable.Cell>
                    </IndexTable.Row>
                  ))
                )}
              </IndexTable>
            </Form>
          )}
        </Formik>
      ) : null}
      <Button
        icon={<Icon source={MobilePlusMajor} />}
        onClick={() => {
          setIsProductPickerOpen(true)
        }}
      >
        Add products and variants
      </Button>
      <ResourcePicker
        resourceType="Product"
        open={isProductPickerOpen}
        showVariants
        onSelection={productPickerOnSelectHandler}
        onCancel={productPickerOnCancelHandler}
      />

      <p>&nbsp;</p>
    </>
  )
}

export default SelectProducts

I am not sure what to put in the setFieldValue for variant.quantity. How do I set it correctly? Or am I understanding this the wrong way?