I am building a react native app and I'm quite confused about how the page navigation is occurring. I seem to have a problem where my navigation is skipping a page.

<NavigationContainer>
      
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen 
          component={HomeScreen}
          name="Home"
        />
        <Stack.Screen 
          component={FirstScreen}
          name="First"
        />
         <Stack.Screen 
          component={AssignWorkoutScreen}
          name="Third"
        />

        <Stack.Screen 
          component={SecondScreen}
          name="Second"
        />
      </Stack.Navigator>
    </NavigationContainer>

My goal is to achieve the following navigation I want to go from home -> First Screen -> 2nd Screen. However, I run into the issue that when I click the first screen it immediately jumps the first screen to the second one.

Code for Home:

class HomeScreen extends React.Component {
    render() { 
        return (
          <View>
            <Button
              title="First"
              onPress={() => this.props.navigation.push("First")}
            />
            
          </View>
        );
    }
}

Code for First Screen:

class FirstScreen extends React.Component {
  render() {
    return (
        <ScreenContainer>
        ...
            <Button
            title='hey'
            onPress={this.props.navigation.navigate("Second")}/>
        ...

      </ScreenContainer>
 
    );
  }
}

Thank you for all your help!