Rendering a new input filed for a specific task in ReactJs

I am tryin’ to build the Ecommerece admin dashboard by myself, and I am facing some challenges.
I want to add a product into the products table, but this product is having variants (for e.g. a cloths product has size and color variants). so The only way to add a variant is by adding a product menu itself.

I have a variant name input field that describes the name for the specific variant (for e.g. the color) and I have a variant type input field that describes the type of color (for e.g. red, green, yellow..etc).
I want to render the input field from the user perspective in order to maintain the perfect user experience.

so to add a variant I will have to add its name in this field:

then after writing the variant name, another input field will pop up which is the description for that variant name (one variant may have more than one type)

the problem is how to do this process of adding types for the user, in other words, how to render the input fields depending on the need of the user for variant names.

and after the user clicked the SAVE button, I want to extract the variants in a javascript object like this:

"variants": [
{
"id": "1",
"type": "color",
"name": "اللون",
"variants": [
{
"id": "11",
"name": "white",
"label": "#FFFFFFFF"
},
{
"id": "12",
"name": "black",
"label": "0xFF000000"
},
{
"id": "13",
"name": "red",
"label": "FFCC0000"
},
{
"id": "14",
"name": "blue",
"label": "2986cc"
}
]
},

I wrote this code this far.

import { Field, Form, Formik } from 'formik';
import React, { useEffect, useState } from 'react';

const VariantsTable = () => {
 

  const variantsVals = {};
  return (
    <>
      <Formik
        initialValues={{
          variantName: '',
        }}
      >
        {({ values }) => (
          <div>
            <Form>
              <div className="mb-4  content-center">
                <h5>Product details</h5>
                <Field
                  className="shadow appearance-none border rounded w-full py-2 px-3 mt-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                  name="variantName"
                  type="text"
                  placeholder={'Variant Name'}
                />
                {values.variantName && (
                  <Field
                    className="shadow appearance-none border rounded w-full py-2 px-3 mt-4 mr-8 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                    name="variantType"
                    type="text"
                    placeholder={'Variant type'}
                  />
                )}
                {values.variantType && (
                  <Field
                    className="shadow appearance-none border rounded w-full py-2 px-3 mt-4 mr-8 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                    name="variantType"
                    type="text"
                    placeholder={'variant type'}
                  />
                )}
              </div>
              <button
                className="bg-buttonsColor hover:bg-maincolor text-black font-bold py-2 px-4 rounded focus:outline-none  focus:shadow-outline"
                type="submit"
                onClick={() => {
                  variantsVals['variantName'] = values.variantName;
                  variantsVals['variantType'] = values.variantType;
                  variantsVals['id'] = 1;

                  console.log(values);
                }}
              >
                save
              </button>
            </Form>
          </div>
        )}
      </Formik>

export default VariantsTable;

I hope I find some helpful answers because I am really stuck at this point.
Thanks in advance.