Failing to pass argument to component

I am thinking from the error Expo gives me and from what I've read of others with similar problems that my syntax is wrong for passing parameters to the component StudentScreen. I am trying to make a Drawer, StudentsScreen, to list student names and when a student is selected, the app will display StudentScreen to show their information.

Error given: Got an invalid value for 'component' prop for the screen 'Student1'. It must be a vilid React Component.

Here are the two components I have narrowed it down to. If there is anything I have left out, please let me know.

function StudentScreen({ studentName }) {
    const [name, setName] = React.useState('');
    const theName = studentName;

    return (
        <View>
          <Text>The student's name is {theName}</Text>
        </View>
    )
}

function StudentsScreen({ navigation }) {
    const dimensions = useWindowDimensions();

    return (
        <StudentListDrawer.Navigator
            screenOptions={{
                drawerType: dimensions.width >= 768 ? 'permanent' : 'slide',
            }}>
          <StudentListDrawer.Screen
            name='Student1'
            component={StudentScreen({studentName: 'Julia'})}
          />
          <StudentListDrawer.Screen
            name='Student2'
            component={StudentScreen({studentName: 'Samuel'})}
          />
        {/*
          <Text style={styles.headingText}> Home Screen </Text>
            <TextInput
                style={styles.userText}
                placeholder='Please add text'
                value={name}
                onChangeText={(text)=> setName(text)} />
          <Button
            title='Go to detail'
            style={styles.button}
            onPress={() => navigation.navigate(
                "DetailScreen",
                { params:
                  { student: name }
                }
            )}
          />
         */}
        </StudentListDrawer.Navigator>
    )
}

The component prop of a screen in any navigator including the Drawer is just a reference to the actual JSX component in react-native-navigation.

We usually do not create the actual component ourselves and pass it to the above prop. We just need to provide the imported reference.

There are two ways to solve this problem.

1. Create an anonymous function

 <StudentListDrawer.Screen
    name='Student1'
    component={() => <StudentScreen studentName="Julia" />}
 />

2. Use the initialParams prop and access it via the route object

 <StudentListDrawer.Screen
    name='Student1'
    initialParams={{ studentName: 'Julia' }}
    component={StudentScreen}
 />

Access it via the route object as follows.

function StudentScreen({ studentName, route }) {
    const [name, setName] = React.useState(route.params.studentName);

    return (
        <View>
          <Text>{`The student's name is ${name}`}</Text>
        </View>
    )
}

Remarks: This works for every navigator, not just a Drawer.