UseEffect Hook with functions wont compile

Question

I'm using 'react-burger-menu' https://github.com/negomi/react-burger-menu And with the help of useContext hook i want another button to close/open the sidemenu that I've implemented. My issue is that i get the following error following their documentation

Objects are not valid as a React child (found: object with keys {isMenuOpen, toggleMenu, stateChangeHandler}). If you meant to render a collection of children, use an array instead.

Cart.js (this is where the 'Burger-Menu' is implemented)

import React,  {useContext} from 'react'
import {MyContext} from './MyContext'
import { slide as Menu } from 'react-burger-menu'
import './Cart.css'

export default function Cart() {
  const ctx = useContext(MyContext);
  return (
    <div>
      <Menu
        right
        width={350}
        isOpen={false}
        onStateChange={state => ctx.stateChangeHandler(state)}
        customBurgerIcon={
          <i className="fa fa-shopping-cart" aria-hidden="true" />
        }
        burgerButtonClassName={"cartButton"}
      >
        <h1>Your Cart</h1>
        <button onClick={ctx.toggleMenu}>Toggle menu</button>
      </Menu>
    </div>
  );
}

MyContext.js This is where the code breaks. I've tried removing some of the code and just sending around String values to make sure it works and it did, but once i start using functions it refuses to compile.

import React, {createContext, useState} from 'react'
export const MyContext = createContext();
export const MyProvider = props => {
  const [menuOpenState, setMenuOpenState] = useState(false);
  return (
    <MyContext.Provider
      value={{
        isMenuOpen: menuOpenState,
        toggleMenu: () => setMenuOpenState(!menuOpenState),
        stateChangeHandler: newState => setMenuOpenState(newState.isOpen)
      }}
    >
      {props.children}
    </MyContext.Provider>
  );
};

Navigation.js And this is how i've wrapped the provider. this should be ok.

<MyProvider>
  <Cart />
</MyProvider>

I've been following the official documentation from 'burger-menu' of how to implement this with hooks here, but i cant seem to figure out this issue. Any suggestions would be much appreciated.