Passing in a variable as Tab Screen component

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}