"Failed to execute 'drawImage' on 'CanvasRenderingContext2D'" this error occured when i click on download button

Question

import './App.css';
import React, {useRef, useState} from 'react';
import { UploadFile } from "@mui/icons-material";

function App() {

  const inputFile = useRef()
  const inputImg = useRef()

  let [image, setImage] = useState('')
  let [isImg, setIsImg] = useState(false)

  const handleImage = (e)=>{
    const file = e.target.files[0]
    if (!file) return;
    setImage(URL.createObjectURL(file))
    setIsImg(true)
    console.log(image)
  }

  const handleDownload = ()=>{
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    canvas.width = image.naturalWidth
    canvas.height = image.naturalHeight
    ctx.translate(canvas.width / 2, canvas.height / 2)
    ctx.drawImage(image, -canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height)
    const link = document.createAttribute('a')
    link.download = "image.jpg"
    link.href = canvas.toDataURL()
    link.click()
  }

  return (
    <div className="App">
      <div className="main-image">
        <input type="file" accept="image/**" ref={inputFile} hidden onChange={handleImage} />
        {isImg ?
          <img src={image} alt="yourImage" style={{width:'600px'}} ref={inputImg} /> :
          <div className="upload-file" onClick={()=> inputFile.current.click()}><UploadFile style={{width: '250px', height: '250px'}}/>
          <span>Upload Image</span></div>
        }
      </div>
      <button className="Download" onClick={handleDownload}>Download</button>
    </div>
  );
}

export default App;

TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLCanvasElement or HTMLImageElement or HTMLVideoElement or ImageBitmap or OffscreenCanvas or SVGImageElement or VideoFrame)'.

Above error occured when i click on download button