Navigation with parameters from custom element in Flatlist in React Native: Empty parameters

After not succeeding in solving my problem here, I had to create a new question with all my classes in it.

I am new to react native and have a problem figuring out how to navigate from one class to another one with passing parameters and would appreciate your help.

All I want to do is:

1. SessionCreate with flatlist containing CustomButton
2. Navigate from SessionCreate to ItemConfig by clicking CustomButton
3. Pass parameter "element" to ItemConfig
4. Show content of parameter passed in ItemConfig

With this setup an empty "element" is passed as parameter to the ItemConfigScreen (but no error occurs):

app.js:

//Views

function Home({ navigation }) {
  return (
    <HomeScreen />
  );
}

function Session({ navigation }) {
  return (
    <SessionScreen />
  );
}

//subviews

function SessionCreate({ navigation }) {
  return (
    <SessionCreateScreen />
  );
}


function ItemConfig({ navigation }) {
  return (
    <ItemConfigScreen />
  );
}



//navigation stacks
const SessionStack = createStackNavigator();

function SessionStackScreen({ navigation }) {
  return (
    <SessionStack.Navigator>
      <SessionStack.Screen
        name="Session"
        component={Session}
        options={{ tabBarLabel: 'Session!'  }}
      />
      <SessionStack.Screen
        name="SessionCreate"
        component={SessionCreate}
        options={{ tabBarLabel: 'SessionCreate!' }}
      />
      <SessionStack.Screen
        name="ItemConfig"
        component={ItemConfig}
        options={{ tabBarLabel: 'ItemConfig!' }}
      />
      
    </SessionStack.Navigator>
  );
}



//Navbar Bottom
const Tab = createBottomTabNavigator();

function App() {
  return (
    <View style={[theme.colcontainer, { flexDirection: "column" }]} >
      
      <NavigationContainer>
        <Tab.Navigator
          screenOptions={({ route }) => ({
            tabBarIcon: ({ focused, color, size }) => {
              let iconName;

              if (route.name === 'Home') {
                iconName = focused ? 'home' : 'home-outline';
              } else if (route.name === 'Session') {
                iconName = focused ? 'book' : 'book-outline';
              } 

              // dynamic ionicon
              return <Ionicons name={iconName} size={size} color={color} />;
            },
          })}
       

        >
          <Tab.Screen name="Home" component={Home} />
          <Tab.Screen name="Session" component={SessionStackScreen} />
          
        </Tab.Navigator>
      </NavigationContainer>
    </View >
  );
}

export default App;

SessionScreen.js:

function SessionScreen() {
    const navigation = useNavigation();

    return (
        <View style={[theme.container, { flexDirection: "column" }]} >

                <View>
                    <TouchableOpacity onPress={() => navigation.navigate('SessionCreate')}>
                        <Text >Create Session</Text>
                    </TouchableOpacity>
                </View>

        </View >
    );
}

export default SessionScreen;

SessionCreateScreen.js:

    //data
    const sessionElements = [
        {
            id: "1",
            title: "title1"
        }
    ];
    
    
    function SessionCreateScreen() {
        const navigation = useNavigation()
    
        const renderItemConfiguration = ({ item }) => (
           <CustomButton element={item.title} onPress={() => navigation.navigate('ItemConfig', { element: 'item.title' })} />
 );
    
        return (
            
                <View style={{ flexDirection: "column", flex: 2}} >
                 
                    <SafeAreaView >
                        <FlatList
                            data={sessionElements}
                            renderItem={renderItemConfiguration}
                            keyExtractor={(item) => item.id}
                        />
                    </SafeAreaView>
    
                </View >
        );
    }
    
    
    
    export default SessionCreateScreen;

ItemConfigScreen.js:

const element = "";

function ItemConfigScreen() {

    return (
        <ScrollView >
            <View style={{ flexDirection: "column", flex: 2}} >
                <Text>Configure {element} here</Text>
            </View >
        </ScrollView>
    );

}

export default ItemConfigScreen;

Any help is appreciated.