How to fix opencv.js throwing random number when using cv.threshold

When I select image and cv.threshold is called it throws weird number

> 6620912

Sometimes the number changes

6620912
Promise.catch (async)
(anonymous) @ App.tsx:49
commitHookEffectListMount @ react-dom_client.js?v=a95a0b27:16902
commitPassiveMountOnFiber @ react-dom_client.js?v=a95a0b27:18150
commitPassiveMountEffects_complete @ react-dom_client.js?v=a95a0b27:18123
commitPassiveMountEffects_begin @ react-dom_client.js?v=a95a0b27:18113
commitPassiveMountEffects @ react-dom_client.js?v=a95a0b27:18103
flushPassiveEffectsImpl @ react-dom_client.js?v=a95a0b27:19484
flushPassiveEffects @ react-dom_client.js?v=a95a0b27:19441
commitRootImpl @ react-dom_client.js?v=a95a0b27:19410
commitRoot @ react-dom_client.js?v=a95a0b27:19271
performSyncWorkOnRoot @ react-dom_client.js?v=a95a0b27:18889
flushSyncCallbacks @ react-dom_client.js?v=a95a0b27:9133
flushSync @ react-dom_client.js?v=a95a0b27:18953
finishEventHandler @ react-dom_client.js?v=a95a0b27:3567
batchedUpdates @ react-dom_client.js?v=a95a0b27:3580
dispatchEventForPluginEventSystem @ react-dom_client.js?v=a95a0b27:7174
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom_client.js?v=a95a0b27:5476
dispatchEvent @ react-dom_client.js?v=a95a0b27:5470
dispatchDiscreteEvent @ react-dom_client.js?v=a95a0b27:5447

StackBlitz

import { FC, useEffect, useRef, useState } from 'react'

declare const cv: any

const Canvas = (width: number, height: number) => {
	const canvas = document.createElement('canvas')

	canvas.width = width
	canvas.height = height

	return canvas
}

const App: FC = () => {
	const [OriginalImage, SetOriginalImage] = useState<string>('')

	const PreviewCanvasRef = useRef<HTMLCanvasElement>(null)

	useEffect(() => {
		if (!OriginalImage) return

		const asyncWrapper = async () => {
			if (!PreviewCanvasRef.current) return

      const image = await new Promise<HTMLImageElement>(resolve => {
        const img = new Image()

        img.onload = () => resolve(img)
        img.src = OriginalImage
      })

			const canvas = Canvas(image.width, image.height)

			const ctx = canvas.getContext('2d')

			ctx?.drawImage(image, 0, 0)

			const rawImage = cv.imread(canvas)
			const tresholdImage = new cv.Mat()

			cv.threshold(rawImage, tresholdImage, 0, 255, cv.THRESH_OTSU)

			cv.imshow(PreviewCanvasRef.current, tresholdImage)

			rawImage.delete()
			tresholdImage.delete()
		}

		asyncWrapper().catch(console.error)
	}, [OriginalImage])

	return (
		<div>
			<input
				type='file'
				name='file'
				accept='image/*'
				onChange={event => {
					SetOriginalImage(prev => {
						if (!event.target.files?.[0]) return prev

						if (prev) URL.revokeObjectURL(prev)

						return URL.createObjectURL(event.target.files[0])
					})
				}}
			/>
			<img alt='Original input' src={OriginalImage} />

			<canvas ref={PreviewCanvasRef} />
		</div>
	)
}

export default App

To fix this I need to grayscale the image first

const grayscaleImage = new cv.Mat()
cv.cvtColor(rawImage, grayscaleImage, cv.COLOR_RGBA2GRAY, 0)

And use the grayscaleImage as input for threshold