Export a property from child components to the parent component using HOC

Question

I am looking to pass a schema from child components and combine the schema and use it at the main App(parent level). Its basically yup schema which is at component level which needs to be merged from components and used in the main App.

Component1
const schema =  Yup.object().shape({Name:Yup.string().required()})
const comp1 = () => { 
}
Component2  
const schema =  Yup.object().shape({Age:Yup.string().required()})
const comp2 = () => {
}


<App validationSchmea={mergedSchemas}/>

Inside the App the components live.

Hoc will take in the Schemas and concat it and export it to the main App (parent) What would be the best way to export the schema using a HoC and then on the main app use the HoC to get all schemas from all components.

The Logic to Merge Schemas :



import { emailSchema } from '../components/Email'
import { dateSchema } from '../components/DateofBirth'
import { nameSchema } from '../components/Name'
import { taxIdSchema } from '../components/TaxId'
import { phoneSchema } from '../components/Phone'
import { maritalSchema } from '../components/MartialStatus'
import { citizenSchema } from '../components/CitizenStatus'
import { addressSchema } from '../components/Address'



const mergeSchemas = (...schemas) => {
const [first, ...rest] = schemas;

const merged = rest.reduce(
    (mergedSchemas, schema) => mergedSchemas.concat(schema),
    first
);
return merged;
}

const mergedSchemas = mergeSchemas(emailSchema, dateSchema, nameSchema, 
taxIdSchema, phoneSchema, maritalSchema, citizenSchema, addressSchema)

export default mergedSchemas

I am looking best practices to use the Hoc from the component level to the top level.Any suggestions ?