Утечка памяти при вызове нативного onload в React

Всем привет! Мучаюсь с такой проблемой. Я написал компоненту Canvas которая рендерит картинку представляющую из себя канвас и пропсы. Для того что бы дождаться что картинка загружена успешно я использую нативное событие onload но при этом течёт память. Картинка рендериться бесконечно. Помогите разобраться в чём дело пожалуйста!

import React, { useEffect, useRef, useCallback } from 'react';

// pic
import picture from '../../images/soho.png';

function Canvas({ name, surname }) {
    const canvas = useRef(null);
    const img = useRef(null);

    const getCanvas = useCallback(() => {
        img.current.onload = function() {
            const ctx = canvas.current.getContext("2d");
            ctx.drawImage(img.current, 0, 0);
            ctx.font = "90px bold Courier";
            ctx.fillStyle = "green";
            ctx.fillText(name, 50, 110);
            ctx.fillText(surname, 50, 210);
            const dataUrl = canvas.current.toDataURL("image/png")
            img.current.src = dataUrl;

            console.log('img.current', img.current);
        }
    }, [name, surname])

    useEffect(() => {
        getCanvas();
    }, [getCanvas]);

    return (
        <div>
            <canvas ref={canvas} width={640} height={425} hidden={true} />
            <img ref={img} src={picture} alt="" />
        </div>
    )
}

export default Canvas;