"TypeError: dispatch is not a function" when using useReducer/useContext and React-Testing-Library

I'm having issues testing my components that use dispatch via useReducer with React-testing-library.

I created a less complex example to try to boil down what is going on and that is still having the same dispatch is not a function problem. When I run my tests, I am getting this error:

      11 |         data-testid="jared-test-button"
      12 |         onClick={() => {
    > 13 |           dispatch({ type: 'SWITCH' })
         |           ^
      14 |         }}
      15 |       >
      16 |         Click Me

But when I do a console.log(typeof dispatch) inside RandomButton the output says function.

Here is the test in question.

import React from 'react'
import RandomButton from '../RandomButton'
import { render, fireEvent } from '@testing-library/react'

describe('Button Render', () => {
  it('click button', () => {
    const { getByTestId, queryByText } = render(<RandomButton />)

    expect(getByTestId('jared-test-button')).toBeInTheDocument()
    fireEvent.click(getByTestId('jared-test-button'))
    expect(queryByText('My name is frog')).toBeInTheDocument()
  })
})

Here is my relevant code:

RandomButton.js

import React, { useContext } from 'react'
import MyContext from 'contexts/MyContext'

const RandomButton = () => {
  const { dispatch } = useContext(MyContext)

  return (
    <div>
      <Button
        data-testid="jared-test-button"
        onClick={() => {
          dispatch({ type: 'SWITCH' })
        }}
      >
        Click Me
      </Button>
    </div>
  )
}

export default RandomButton

MyApp.js

import React, { useReducer } from 'react'
import {myreducer} from './MyFunctions'
import MyContext from 'contexts/MyContext'
import RandomButton from './RandomButton'

  const initialState = {
    blue: false,
  }
  const [{ blue },dispatch] = useReducer(myreducer, initialState)


return (
    <MyContext.Provider value={{ dispatch }}>
      <div>
            {blue && <div>My name is frog</div>}
            <RandomButton />
    </div>
    </MyContext.Provider>
)

export default MyApp

MyFunctions.js

export const myreducer = (state, action) => {
  switch (action.type) {
    case 'SWITCH':
      return { ...state, blue: !state.blue }
    default:
      return state
  }
}

MyContext.js

import React from 'react'

const MyContext = React.createContext({})

export default MyContext

It is probably something stupid that I am missing, but after reading the docs and looking at other examples online I'm not seeing the solution.