Dynamic Container Manufacturing

I've been working on an interesting exercise, where I want to generate a container like so:

Consider this configuration:

    const Container = {
        componentList: [{
            componentList: ["a", "b"],
            align: "v"
        }, "c"],
        align: "h"
    }

Now, the idea is to use a configuration like so to generate a container like these, with all possible configurations. The nesting can go deep!

This is what I have so far:

<View
    style={{
        flexDirection: align === "v" ? "row" : "column",
        justifyContent: "center",
    }}>
    {components.map((component, index) => {
        if (typeof component === "string") {
            return (
                <View
                    key={index}
                    style={{
                        backgroundColor: randomColor(),
                        flex: 0,
                    }}>
                    {renderComps(component)}
                </View>
            )
        } else {
            return RECURSIVE_LOOP
        }
    })}
</View>

And what it generates is this:

What am I doing wrong? I'm extremely new to CSS.