I wanted to check with others to see whether Formik FieldArray and Yup Validation processing was possible based on the following.

I have used Formik FieldArrays in the past but I am trying to build an SQL Query builder that looks like this:

The sqlQuery initialValues looks like this:

// Formik Initial State
const INITIAL_FORM_STATE = {
  queryGroups: [emptySqlQueryLogic]
}

where the following is defined:

        const emptySqlQueryLogic = {
            queryType: 'AND/OR',
            queryRule: [
                {
                    queryRuleCondition: [
                        {
                            column: '',
                            operator: '',
                            value: ''                   
                        }
                    ]
                }
            ]
        }

        // + Add Rule
        const emptyQueryRuleCondition = {
                column: '',
                operator: '',
                value: ''                   
        }

where the user could construct the following queryRuleCondition by pressing the "+ Add Rule" button that would inject an emptyQueryRuleCondition into the queryRuleCondition array

queryRuleCondition: [
  {
    column: 'pet',
    operator: '=',
    value: 'dog'                    
  },
  {
    column: 'color',
    operator: '=',
    value: 'black'                  
  }
]

which would result in the query: (pet = 'dog' and color = 'black')

All this part is fine but what I need to also allow, which is the part that I am not sure is possible, is like a sub-query, that is, I need to allow for a query result of:

(pet = 'dog' AND color = 'black' AND NOT (pet = 'cat' OR color == 'white'))

What I need the ability to do, is to somehow inject the following structure, which is a copy of emptySqlQueryLogic above back into queryRuleCondition structure above.

        // + Add SubQuery
        const emptySubQuery = {
            queryType: 'AND/OR',
            queryRule: [
                {
                    queryRuleCondition: [
                        {
                            column: '',
                            operator: '',
                            value: ''                   
                        }
                    ]
                }
            ]
        }

Depending where the user is, they can either press the "Add Rule" button or "Add SubQuery" button but the end result is the ability to nest queries within queries.

I hope I have explained it correctly but any help would be great.

If anyone can possibly think of an easier solution that will allow the nesting of queries (sub-queries), like my example above, that would be good.