How to give a function access to useContext (React native)

Question

Basically I wrapped a Side Menu in a Provider and gave it menu of a function. Inside the side menu I wrapped stack navigation, so all my navigation screens have access to useContext.state. But my sidemenu's menu() has a problem with accessing useContext.state.

I need my sidemenu to be able to access the state and display the length of useContext.state.

Here is my App.js

import React from 'react';
import { createAppContainer} from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import menu from './src/components/menu';
import SideMenu from 'react-native-side-menu-updated'
import IndexScreen from './src/screens/IndexScreen';
import { Provider } from './src/context/BlogContext';
import ShowScreen from './src/screens/ShowScreen';
import CreateScreen from './src/screens/CreateScreen';
import EditScreen from './src/screens/EditScreen';


const navigator = createStackNavigator({
  Index: IndexScreen,
  Show: ShowScreen,
  Create: CreateScreen,
  Edit: EditScreen,
}, {
  initialRouteName: 'Index',
  defaultNavigationOptions: {
    title: 'Blogs',
    headerStyle: {
      backgroundColor: '#9AC4F8',
    },
    headerTintColor: "white",
  },
});

const App = createAppContainer(navigator);

export default () => {
  return (
    <Provider>
      <SideMenu menu={menu()} >     
        <App />    
      </SideMenu>
    </Provider>
  );
}

and this is my menu.js

import React, {useContext} from 'react';
import { Context } from '../context/BlogContext';
import { View, Text } from 'react-native';
import { State } from 'react-native-gesture-handler';


const menu = () =>{
    const { state } = useContext(Context);
    console.log(state);
    return ( 
        <View>
            <Text>{State.length}</Text>
        </View>
  )
}
export default menu;

This is the error that it wrote

Can you help me to understand how to access state in this menu function?

Here is my Reducer:

import createDataContext from './createDataContext';

const blogReducer = (state, action) => {
    switch (action.type) {
        case 'edit_blogpost':
            return state.map((blogPost) => {
                return blogPost.id === action.payload.id ? action.payload : blogPost;                
            });
        case 'delete_blogpost':
            return state.filter((blogPost) => blogPost.id !== action.payload);
        case 'add_blogpost':
            return [
                ...state, 
                {
                id: Math.floor(Math.random() * 99999), 
                title: action.payload.title,
                content: action.payload.content
                }
            ];
        default:
            return state;
    }
};

const addBlogPost = (dispatch) => {
    return (title, content, callback) => {
        dispatch({type: 'add_blogpost', payload: {title: title, content: content}});
        if(callback){
            callback();
        }
    };
};

const deleteBlogPost = dispatch => {
    return (id) => {
        dispatch({ type: 'delete_blogpost', payload: id })
    };
}

const editBlogPost = dispatch => {
    return(id, title, content, callback) => {
        dispatch({ 
            type: 'edit_blogpost', 
            payload: { id:id, title:title, content:content}
        });
        if(callback){
            callback();
        }
    };
};

export const {Context, Provider} = createDataContext(
    blogReducer, 
    {addBlogPost, deleteBlogPost, editBlogPost},
    []
);

and Context:

import React, { useReducer } from 'react';

export default (reducer, actions, initialState) => {
    const Context = React.createContext();

    const Provider = ({ children }) => {
        const [state, dispatch] = useReducer(reducer, initialState);

        //actions === { addBlogPost: (dispatch) => {return () => {} } }
        const boundActions = {};
        for(let key in actions) {
            boundActions[key] = actions[key](dispatch);
        }

        return <Context.Provider value={{ state: state, ...boundActions}}>
            {children}
        </Context.Provider>
    }

    return { Context, Provider };
};