How do I add a new row to table from Formik input values?

Question

Here I am using flux pattern and Formik and yup to handle forms. How to implement onSubmit to add data?

import React from 'react'
import { useFormik } from 'formik'
import * as Yup from 'yup'

const CommentForm = () => {
  const formik = useFormik({
    initialValues: {
      productname: '',
      quantity: '',
      price: '',
    },

    validationSchema: Yup.object({
      productname: Yup.string()
        .max(8, 'Must be 8 characters or less')
        .required('Product Name is Required'),
      quantity: Yup.string()
        .min(1, 'Must be 1 character at a minimum')
        .required('Quantity is Required'),
      price: Yup.string()
        .min(4, 'Must be enter 4 characters')
        .required('Price is required'),
    }),
    /*onSubmit: values =>{
      alert(JSON.stringify(values, null,2));
    },*/
  })
  return (
    <div>
      <h1>ADD PRODUCT</h1>
      <form onSubmit={formik.handleSubmit}>
        <div>
          <input
            type="text"
            name="productname"
            placeholder="Enter Product Name"
            onChange={formik.handleChange}
            value={formik.values.productname}
          />
          {formik.touched.productname && formik.errors.productname && (
            <span style={{ color: 'red' }}>{formik.errors.productname}</span>
          )}
        </div>
        <br />
        <br />
        <div>
          <input
            type="text"
            name="quantity"
            placeholder=" Enter Quantity"
            onChange={formik.handleChange}
            value={formik.values.quantity}
          />
          {formik.touched.quantity && formik.errors.quantity && (
            <span style={{ color: 'red' }}>{formik.errors.quantity}</span>
          )}
        </div>
        <br />
        <br />
        <div>
          <input
            type="text"
            name="price"
            placeholder="Enter Price"
            onChange={formik.handleChange}
            value={formik.values.price}
          />
          {formik.touched.price && formik.errors.price && (
            <span style={{ color: 'red' }}>{formik.errors.price}</span>
          )}
        </div>
        <br />
        <button type="submit">Submit</button>
      </form>
    </div>
  )
}

export default CommentForm