Object passed changes every render

I am trying to define a global state provider for an app I am building with react. But I keep getting the error

The object passed as the value prop to the Context provider (at line 19) changes every render. To fix this consider wrapping it in a useMemo hook

Here is my file structure. state.ts

export default interface State {
    data: boolean
}

export const initialState: State = {
    data: false,
}

action.ts

type Action = {
    type: "SET_DATA"
    value: boolean
}

export default Action

context.ts

import { Context, createContext, Dispatch } from "react"
import Action from "./actions"
import State, { initialState } from "./state"

const GlobalContext: Context<{
    globalState: State
    dispatch: Dispatch<Action>
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
}> = createContext({ globalState: initialState, dispatch: (_: Action) => {} })

export default GlobalContext

provider.tsx

import * as React from "react"
import { ReactNode, ReactElement, useReducer } from "react"
import GlobalContext from "./context"
import Reducer from "./reducer"
import State, { initialState as defaultInitialState } from "./state"

export default function GlobalStateProvider({
    children,
    initialState = defaultInitialState,
}: {
    children: ReactNode
    initialState?: State
}): ReactElement {
    const [globalState, dispatch] = useReducer(Reducer, initialState)

    return (
        <GlobalContext.Provider value={{ dispatch, globalState }}>
            {children}
        </GlobalContext.Provider>
    )
}

GlobalStateProvider.defaultProps = {
    initialState: defaultInitialState,
}

I have gone through the code multiple times and I cannot seem to figure out what is wrong and why I am getting this error.
If someone can further explain why this is happening and perhaps and solution that would be helpful.