Как использовать хук после рендера?

Question

[abcda2015201]

Повторяю по 1 видео рисовалку, но тк там пишется на mobx + canvas = Все его инструменты и кисти написаны с помощью классов. Вопрос как мне после рендера компонентов:

return (
        <Provider store={store}>
            <div className="App">
                <ToolBar></ToolBar>
                <SettingBar></SettingBar>
                <Canvas></Canvas>
            </div>
        </Provider>
    );

А именно Canvas - где я через useEffect диспачу ссылку на canvas, использовать мой хук который требует в виде аргумента ссылку на неё.

const dispatch = useDispatch()
    const canvasRef = useSelector((state) => state.canvas.canvasRef)

    useEffect(() => {
        if(canvasRef){
            const {} = useBrush(canvasRef)
        }
    }, [canvasRef]);

Это внутри Toolbar, но тк хук в хуке нельзя использовать я не понимаю как это можно реализовать. Проблема в том что useBrush в итоге получает все кроме ссылки, и как я понял суть в том что хук юзается раньше чем я получу ссылку, прошу помощи, вот сам хук если нужно:

import { useEffect, useRef } from 'react';

const useBrush = (canvas) => {
    const ctxRef = useRef(null);
    const mouseDownRef = useRef(false);

    useEffect(() => {
        const ctx = canvas.getContext('2d');
        ctxRef.current = ctx;

        const mouseUpHandler = () => {
            mouseDownRef.current = false;
        };

        const mouseDownHandler = (e) => {
            mouseDownRef.current = true;
            ctx.beginPath();
            ctx.moveTo(e.pageX - e.target.offsetLeft, e.pageY - e.target.offsetTop);
        };

        const mouseMoveHandler = (e) => {
            if (mouseDownRef.current) {
                draw(e.pageX - e.target.offsetLeft, e.pageY - e.target.offsetTop);
            }
        };

        const draw = (x, y) => {
            ctx.lineTo(x, y);
            ctx.stroke();
        };

        canvas.addEventListener('mouseup', mouseUpHandler);
        canvas.addEventListener('mousedown', mouseDownHandler);
        canvas.addEventListener('mousemove', mouseMoveHandler);

        return () => {
            canvas.removeEventListener('mouseup', mouseUpHandler);
            canvas.removeEventListener('mousedown', mouseDownHandler);
            canvas.removeEventListener('mousemove', mouseMoveHandler);
        };
    }, [canvas]);

    return {
        setFillColor: (color) => {
            ctxRef.current.fillStyle = color;
        },
        setStrokeColor: (color) => {
            ctxRef.current.strokeStyle = color;
        },
        setLineWidth: (width) => {
            ctxRef.current.lineWidth = width;
        }
    };
}

export default useBrush;

Comments

[abcda2015201]

Изначально я писал инструменты(useBrush) в виде классов, но позже были проблемы и решил переписать, в итоге вот, попросил гпт переписать с класса на функционалку