Passing in a variable as Tab Screen component

Question

I want to be able to use data collected from an API and stored in JSON to be used as component names for my Tab Navigator.

Example:

const InstructionsTemplate = ({ navigation, route }) => {
    ...
}

const PrinterTemplate = ({ navigation, route }) => {
    ...
}

const ScannerTemplate = ({ navigation, route }) => {
    ...
}

export const JobScreen = ({ navigation, route }) => {
    const json = {
        "steps": [
            {
                "step_slug": 1,
                "step_type": "InstructionsTemplate"
            },
            {
                "step_slug": 2,
                "step_type": "PrinterTemplate"
            },
            {
                "step_slug": 3,
                "step_type": "InstructionsTemplate"
            },
            {
                "step_slug": 4,
                "step_type": "ScannerTemplate"
            }
        ]
    };

    const [data, setData] = useState(json.steps);

    return (
        <JobTab.Navigator screenOptions={({ route }) => ({ headerShown: true })}>
            {data.map((step) => {
                return (
                    <JobTab.Screen
                        key={step.step_slug}
                        name={step.step_slug}
                        options={{
                            title: "",
                            headerRight: () => (
                                <Pressable onPress={() => navigation.navigate('Jobs')}>
                                    <Ionicons name='close-outline' size={32} color={isDarkMode ? IndigoColors.white : IndigoColors.black}/>
                                </Pressable>
                            )
                     }}
                        component={step.step_type}
                        initialParams={{ stepSlug: step.step_slug, stepType: step.step_type, ... }}
                    />
                    )
            })}
        </JobTab.Navigator>
    )
};

Line 52 particularly is causing me problems.

Tried passing the variable through in double curly brackets {{step.step_type}} and without curly brackets step.step_type.

Passing through the component name as text works: component={InstructionsTemplate}