I am currently working on a project that has some sections that have multiple different variants and a default variant, these variants can have totally different markup, so use CVA isn't an option. My idea was to have a HOC that receives a map with the variants, and a default version as parameters ⬇️

function createSection(variants: { [key: string]: ReturnType<typeof dynamic>}, defaultComponent): ReactNode {
    // logic
}

// Now I can use SectionX in my code and the variant choosing happens automaticly
export SectionX = createSection({}, DefaultX)

Is this the correct sollution? Or is there an other way?