React 18.2.0使用Context API出现意外警告，求排查

我在React 18.2.0项目中，应用首次渲染后浏览器就出现了警告/错误，无需任何用户交互就会触发，预期是不显示任何警告或错误。我已查阅相关资料，但找到的内容对当前场景无用，希望有人能帮我排查是否错误使用了React的Context API，不清楚警告来源，提前感谢！

App.tsx #

import '@styles/App.sass'
import '@styles/_globals.sass'
import { AppContextProvider } from '@context/AppContext'
import Header from '@components/Header'
import InputSlider from '@components/InputSlider'
import AppCanvas from '@components/AppCanvas'

function App() {
    return (
        <AppContextProvider>
            <div id="framez" className="app text-selection-disabled">
                <Header />
                <AppCanvas />
                <InputSlider />
            </div>
        </AppContextProvider>
    )
}

export default App

AppCanvas.tsx #

import React, { useEffect } from 'react'
import { useWindowSize } from '@hooks/useWindowSize'
import { useAppCanvas } from '@hooks/useAppCanvas'

const AppCanvas = () => {
    const { height, width } = useWindowSize()
    const canvas = useAppCanvas()

    useEffect(() => canvas.updateScreen(), [width, height])
    return (
        <canvas
            width={width}
            height={height}
            ref={canvas.canvasRef}
            onPointerDown={canvas.handlePointerDown}
            onPointerUp={canvas.handlePointerUp}
            onPointerMove={canvas.handlePointerMove}
            onWheel={canvas.handleWheel}
        />
    )
}

export default AppCanvas

useAppCanvas.tsx #

import { clearContext, getContextFromRef } from '@utils'
import { useCanvasGestures } from './useCanvasGestures'
import { useRef } from 'react'
import { useAppContext } from '@context/AppContext'

export function useAppCanvas() {
    const canvasRef = useRef<HTMLCanvasElement | null>(null)
    const { graphicStructure: structure } = useAppContext()
    const gestures = useCanvasGestures()

    function updateScreen() {
        const ctx = getContextFromRef(canvasRef)
        clearContext(ctx)
        gestures.applyGestures(ctx)
        structure.current.setContext(ctx)
        structure.current.generatePaths()
        structure.current.printOnContext()
    }
    function handlePointerDown(e: React.PointerEvent) {
        gestures.pointerDownHandler(e)
        updateScreen()
    }
    function handlePointerUp(e: React.PointerEvent) {
        gestures.pointerUpHandler(e)
        updateScreen()
    }
    function handlePointerMove(e: React.PointerEvent) {
        gestures.pointerMoveHandler(e)
        updateScreen()
    }
    function handleWheel(e: React.WheelEvent) {
        gestures.wheelHandler(e)
        updateScreen()
    }
    return {
        canvasRef,
        updateScreen,
        handlePointerUp,
        handlePointerDown,
        handlePointerMove,
        handleWheel,
    }
}

AppContext.tsx #

import React, { createContext, useContext } from 'react'
import { useInitialState } from '@hooks/useInitialState'
import { IAppState, IElement, INode, IUIStructure } from '@interfaces'

export interface IAppContext {
    state: IAppState
    graphicStructure: React.MutableRefObject<IUIStructure>
    setSelection(payload: {
        type: 'node' | 'element' | null
        object: INode | IElement | null
    }): void
}

const AppContext = createContext<IAppContext | undefined>(undefined)

export function useAppContext() {
    const context = useContext(AppContext)
    if (context === undefined) {
        throw new Error(
            'useAppContext must be used within a AppContext.Provider',
        )
    }
    return context
}

interface Props extends React.HTMLProps<HTMLDivElement> {
    children: React.ReactNode
}

export const AppContextProvider: React.FC<Props> = ({ children }) => {
    const value = useInitialState()
    return <AppContext.Provider value={value}>{children}</AppContext.Provider>
}

useInitialState.tsx #

import { useRef, useState } from 'react'
import { IAppState, IElement, INode } from '@interfaces'
import { IAppContext } from '@context/AppContext'
import { structure } from '@config'
import { UIStructure } from '@classes/ui/UIStructure'

const initialState: IAppState = {
    structure: structure,
    selection: {
        type: null,
        object: null,
    },
}

export function useInitialState(): IAppContext {
    const [state, setState] = useState(initialState)
    const graphicStructure = useRef(new UIStructure(structure))

    function setSelection(payload: {
        type: 'node' | 'element' | null
        object: INode | IElement | null
    }) {
        const { type, object } = payload
        setState((prev) => ({ ...prev, selection: { type, object } }))
    }

    return { state, graphicStructure, setSelection }
}

内容的提问来源于stack exchange，提问作者cala-js