React native elements Button Group button disappears when navigating back to the screen

Question

I have been trying to figure out what I am doing wrong here, and I just can't. I have two screens where I pull data from my database, and click on an item(category). That item(category) then pulls up more data from my database when a certain word is pressed. I have to two options for the user on the Viewcategory screen. Either they can press the back arrow to go back and select more items from a different category, or they can hit the next button and it takes them to another screen. The problem that I am having is when I press the back arrow, and go back to pick another category. Once that category is picked the next button disappears. It will not reappear unless I reload my entire project.

Here is the first screen MenuWS

constructor(props) {
        super(props);
        this.state = {
            restaurantlocationcode: '',
            dataSource: [],
        }
        this.updateIndex = this.updateIndex.bind(this)
    }

    updateIndex (selectedIndex) {
        this.setState({selectedIndex})
        this.viewMenu(selectedIndex)
    }

    render() {

        const buttons = ['Menu']
        const { selectedIndex } = this.state

        return (
            <View style={styles.container}>
                <MenuButtonWS navigation={this.props.navigation} />

                <Input
                    style={styles.Input} 
                    placeholder='Restaurant Location Code'
                    leftIcon={
                        <Icon
                        name='location-arrow' 
                        size={24}
                        color='black'
                        />
                    }
                    onChangeText={ (restaurantlocationcode) => this.setState({restaurantlocationcode})}
                    value={this.state.restaurantlocationcode}
                    underlineColorAndroid='transparent'
                />

                <ButtonGroup
                onPress={this.updateIndex}
                selectedIndex={selectedIndex}
                selectedButtonStyle={{backgroundColor: 'blue'}}
                buttons={buttons}
                containerStyle={styles.buttonGroup} 
                />

                <FlatList 
                    data={this.state.dataSource}
                    extraData={this.state}
                    keyExtractor={(item, index) => index.toString()}
                    renderItem={({item, index}) => (
                        <ListItem
                        titleStyle={{ color: 'black', fontWeight: 'bold'}}
                        title={`${item}`}
                        onPress={() => this.viewCategory(item)}
                        bottomDivider
                        chevron
                        />
                    )}
                />

            </View>
        )
    }

    viewMenu = (index) => {
        if (index === 0) {
            let rlc = {
                restaurantlocationcode: this.state.restaurantlocationcode,
            };
            
            fetch('URL', {
                method: 'POST',
                body: JSON.stringify(rlc),
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                },
            })
                .then((response) => response.json())
                .then((responseJson) => {
                    this.setState({
                        dataSource: responseJson,
                    });
                    console.log(responseJson)
                    
                })
                .catch((error) => {
                    console.log(error);
                });
        }
    }
    
    viewCategory = (item) => {
        
        fetch('URL', {
            method: 'POST',
            body: JSON.stringify({
                category: item,
                restaurantlocationcode: this.state.restaurantlocationcode,
            }),
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
        })
            .then((response) => response.text())
            .then((responseJson) => {
                this.setState({
                    dataSource: responseJson,
                });
                console.log(responseJson)
                
                this.setState({dataSource: []})
                this.props.navigation.navigate('ViewCategoryWS', {
                    food: responseJson,
                    otherParam: '101',
                });
            })
            .catch((error) => {
                console.log(error);
            });
    }
}

Here is the screen where you can view the items in each category (Viewcategory screen)

constructor(props) {
        super(props);
        const  { navigation } = this.props;
        const cust = navigation.getParam('food', 'No-User');
        const other_param = navigation.getParam('otherParam', 'No-User');
        const cust1 = JSON.parse(cust);
        const data = cust1.map(item => ({label: item, checked: false}));
        this.state = {
            dataSource: [],
            data,
            checked: null,
            selectedIndex: 2,
        }
        this.updateIndex = this.updateIndex.bind(this)
    }

    updateIndex (selectedIndex) {
        this.setState({selectedIndex})
        this.nextScreen(selectedIndex)
    }

    render() {
        const buttons = ['Next']
        const { selectedIndex } = this.state
        const {data} = this.state;
        console.log(data);

        return (
            <View style={styles.container}>
                <BackButtonWS2 navigation={this.props.navigation} />
                
                <FlatList
                    data={data}
                    extraData={this.state}
                    keyExtractor={(item, index) => index.toString()}
                    renderItem={({ item, index }) => (
                        <CheckBox 
                        center 
                        titleProps={{ color: 'black', fontWeight: 'bold'}}
                        title={item.label}
                        iconRight
                        checked={item.checked}
                        size={30}
                        onPress={() => this.onCheck(index, item.label)}
                        containerStyle={styles.checkBox} 
                        />    
                    )}
                />
                <ButtonGroup 
                onPress={this.updateIndex}
                selectedIndex={selectedIndex}
                selectedButtonStyle={{backgroundColor: 'blue'}}
                buttons={buttons}
                containerStyle={styles.buttonGroup}
                />
                

            </View>
        )
    }

    onCheck = (index, item) => {
        let {data} = this.state;
        data[index].checked = !data[index].checked;
        this.setState({data})
        this.state.dataSource.push([item]);
        //alert(this.state.dataSource);
        console.log(this.state.dataSource);
    }

    nextScreen = (index, item) => {
        if (index === 0) {
            this.props.navigation.navigate('UsersBill', {
                foodCat: this.state.dataSource,
                otherParam: '101',
            });
            alert(this.state.dataSource);   
        }
    }
}

Here is my code for my back button

  _back = () => {
        this.props.navigation.navigate('MenuWS', {
            food: 'food',
            otherParam: '101',
        });
    } 

    render() {
        return(
            <Icon 
                name='arrow-left'
                color="#000000"
                size={25}
                style={styles.menuIcon}
                onPress={() => this._back()}
            />
        )
    }
}

I have tried to use the goBack function and that just takes me back to the home screen, and not the screen that I need. I have also tried to send the params that I have selected back to the menu screen to see if it will just reset and it does not. I'm not sure exactly what happening with it. Has anyone ever come across this problem before?