slot pattern for framer x

OrganismCard.tsx

import * as React from "react";
import { Frame, PropertyControls, ControlType } from "framer";
import { MoleculeLeftContentText } from "./MoleculeLeftContentText"
import { MoleculeLeftContentTextTwoLines } from "./MoleculeLeftContentTextTwoLines";

const style: React.CSSProperties = {
    height: 78,
    marginLeft: 12,
    marginRight: 12,
    paddingLeft: 18,
    //width: "100%",
    display: "flex",
    alignItems: "center",
    justifyContent: "left",
    textAlign: "left",
    color: "#000000",
    background: "rgba(255, 255, 255, 1)",
    overflow: "hidden",
    boxShadow: "0 1px 2px rgba(0,0,0,0.09), 0 4px 15px rgba(0,0,0,0.05)",
    borderRadius: 4,
};


// Define type of property
interface Props {
    text: string;
    leftSlot: string;
}

export class OrganismCard extends React.Component<Props> {
    
    // Set default properties
    static defaultProps = {
        text: "Hello World!",
        leftSlot: <MoleculeLeftContentText />, // TODO this works, but probably is not correct
    }

    // Items shown in property panel
    static propertyControls: PropertyControls = {
        text: { type: ControlType.String, title: "Text" },
        // TODO how to make this work?
        // leftSlot: {
        //     type: ControlType.Enum,
        //     options: [<MoleculeLeftContentText />, <MoleculeLeftContentTextTwoLines />],
        //     optionTitles: ["Text", "TextTwoLines"],
        //     title: "Left Content"
        // }
    }

    render() {
        
        return (
            <Frame style={style} width={this.props.width-24}>
                {this.props.leftSlot}
            </Frame>
        )
    }
}