Im trying to create a canvas in react that can be drawn on. For the canvas i want to have an image on it called Dogimage which is drawn on, this image is stored in another folder in my directory with the path ../../images/dog-without-labels.png . I already have the drawing working, but i cant seem to load the image onto the canvas as nothing shows up on the canvas.

this is some of my code

import React, { useEffect, useRef, useState } from "react";



function DrawCanvas() {

    const canvasRef = useRef(null)
    const contextRef = useRef(null)
    const [isDrawing, setIsDrawing] = useState(false)
    const [image, setImage] = useState(null)


    useEffect(() => {
        const canvas = canvasRef.current;
        canvas.width = window.innerWidth/1.5 ;
        canvas.height = window.innerHeight/1.5 ;
        canvas.style.width = `${window.innerWidth/3}px`;
        canvas.style.height = `${window.innerHeight/3}px`;

        const context = canvas.getContext("2d")
        context.scale(2,2)
        context.lineCap = "round"
        context.lineWidth = 3
        context.strokeStyle = "black"
        //const image = new Image();
        const Dogimage = document.createElement('img');
        Dogimage.src = '../../images/dog-without-labels.png'
        Dogimage.onload = () => setImage(Dogimage)

        context.drawImage(Dogimage, 0, 0,400,256+80);
        
        contextRef.current = context
        
    }, [])

Any advice on how i can load the image onto the canvas?