I thought it will work, first by extracting image:

   const [b, setB] = useState<any>()

   const draw = (ctx) => {
       // some code here
   }

   const canvas = canvasRef.current
   if (canvas && !isUploaded) {
       const context = canvas?.getContext('2d')
       draw(context)
       canvas.toBlob(
           (b2) => {
               console.log(b2)
               setB(b2)
           },
           'image/jpeg',
           0.95
       )
   }

   
   useEffect(() => {
       // get presign URL

   return axios({
       method: 'put',
       url: res.data,
       data: b,
       withCredentials: false,
       headers: { 'x-amz-acl': 'public-read' },
   })

// ..

       setIsUploaded(true)
   }, [isReadToUpload])

then send it as it is a "file". But only a big 'black' image is sent, why?