So I am trying to rebuild this site

I am using React (same as the given site) and the same cropper tool they are using. I use react-image-crop for cropping

There is a lot of code so I just added the things that need to be added

This is my code so far

The JSX

<canvas
  ref={canvasRef}
  width={1800}
  height={1800}
  style={{
    backgroundImage: 'url("https://bizexpo.localvocalbusiness.com:8443/images/stallimage/1672025924668.jpg")',
    backgroundSize: "cover",
    backgroundRepeat: "no-repeat",
    backgroundPosition: "center center",
    width: "100%",
    height: "100%",
  }}
/>

The JS logic

async function onImageUpload(files) {
  setOpen(true);
  const [file] = files;
  const url = URL.createObjectURL(file);
  setImageUrl(url);
  const ctx = canvasRef.current?.getContext("2d");
  const canvas = canvasRef.current;
  const image = new Image();
  image.src = url;
  image.onload = () => {
    // I have no idea what to do here