React native flatlist with checkbox using react hooks useContext getting undefined value alerts

I am using react hooks in my app. I am fetching data from my database and displaying it on my menu.js screen. I am using react native flatlist with a listview. This is working perfectly. Once I select an item, that item then fetches more data from my database and is displayed on my next screen which is viewcategory.js. On my viewcategory screen I am using a flatlist with a checkbox inside of it. Now once I select the item on the menu.js and it navigates to viewcategory.js screen nothing is being displayed on the screen. I am using react hooks useContext to pass the value down to the other pages. I set up a button to display the value when I am on the viewcategory screen and I keep getting undefined. But on my menu.js screen when I check the value, the value is being displayed thru an alert and also console.log.

I have tried to add another set of {} to the value in my provider and it doesn't work. I have also tried to add it like this. <ItemContext.Provider value=> and it still does not work. I have looked on here and also followed the different ones on here that talked about usecontext undefined value and they don't work either.

Here is my code.

CategoryItems.js

import  { createContext } from 'react';

const ItemContext = createContext();

export default ItemContext;

Menu.js

import ViewCategoryWS2 from '../Components/ViewCategoryWS2';
import UsersBill2 from '../Components/UsersBill2';
import ItemContext from '../Components/CategoryItems';

export default function menuWS({navigation}) {
    const [restaurantlocationcode, setRestaurantlocationcode] = useState('')
    const [menu, setMenu] = useState([]);
    const [category, setCategory] = useState([]);
    const [selected, setSelected] = useState(0);

    function viewMenu() {
        fetch('URL', {
            method: 'POST',
            body: JSON.stringify({ restaurantlocationcode: restaurantlocationcode}),
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
        })
        .then(response => response.json())
        .then(response=> setMenu(response));
        console.log(menu);
        alert(menu);

    }
    
    function viewCategory({item}) {
        fetch('URL', {
            method: 'POST',
            body: JSON.stringify({
                category: item,
                restaurantlocationcode: restaurantlocationcode,
            }),
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
        })
        .then(response => response.json())
        .then(response => {
            setCategory(response);
            console.log(response);
            alert(response);
        });
        navigation.navigate('ViewCategoryWS2', {category});
        
    }

    function showMenu() {
        console.log(menu);
        alert(menu);
    }

    function showCat() {
        console.log(category);
        alert(category);
    }

    
    const buttons = ['Menu']

    return (
        <View style={styles.container}>
            <ItemContext.Provider value={category}>
            <Input
                style={styles.Input} 
                placeholder='Restaurant Location Code'
                leftIcon={
                    <Icon
                    name='location-arrow' 
                    size={24}
                    color='black'
                    />
                }
                onChangeText={setRestaurantlocationcode}
                value={restaurantlocationcode}
                underlineColorAndroid='transparent'
            />

            <ButtonGroup
                onPress={viewMenu}
                selectedIndex={selected}
                selectedButtonStyle=
                buttons={buttons}
                containerStyle={styles.buttonGroup} 
            />

            <Button 
                title='Next'
                type='solid'
                onPress={() => navigation.navigate('ViewCategoryWS2')}
                containerStyle={styles.button}
            />


            <FlatList 
                data={menu}
                extraData={category}
                keyExtractor={(item, index) => index.toString()}
                renderItem={({item, index}) => (
                    <ListItem
                    titleStyle=
                    title={item}
                    onPress={() => viewCategory({item})}
                    bottomDivider
                    chevron
                    />
                )}
            />
            
            <ViewCategoryWS2 />
            <UsersBill2 />
            </ItemContext.Provider>

        </View>
    )
}

import UsersBill2 from '../Components/UsersBill2';
import ItemContext   from '../Components/CategoryItems';


function ViewCategoryWS2({navigation}) {
    const category = useContext(ItemContext);
    const [eats, setEats] = useState([]);
    const [selected, toggleSelected] = useState(false); 
    
    function free() {
        console.log(category);
        alert(category);
    }

    return (
        <View style={styles.container}>
            <Text>{category}</Text>
            <Button 
                title='Next'
                type='solid'
                onPress={free}
                containerStyle={styles.button}
            />
            <FlatList
                data={JSON.stringify(category)}
                extraData={eats}
                keyExtractor={(item, index) => index.toString()}
                renderItem={({ item, index }) => (
                    <CheckBox 
                        center 
                        titleProps=
                        title={item}
                        iconRight
                        checked={selected}
                        onPress={() => toggleSelected(!selected)}
                        size={30}
                        containerStyle={styles.checkBox} 
                    />  
                    
                )}
            />
            
        </View>
    
    )
    

}

Has anyone came across this issue and if so, how did you handle it?