Getting three.js screenshot gives error "'modelViewMatrix' is a read-only and non-configurable data"

Questions
1

I am using three.js in my vue application.
I am just trying to get blob of the screenshot of my scene.
I first tested it by using:

window.addEventListener('keydown', this.test.bind(this));

while in test function it is:

test(e) {
    if(e.key !== "Enter") return;
    this.testSnap().then();
}

async snapShot() {
    const camera = this.camera;
    if(!camera) return;
    const strMime = "image/jpeg";    // "image/png"
    const scene = this.scene;
    const renderer = this.renderer;
    renderer.render(scene, camera);
    const canvas = this.renderer.domElement;
    return await new Promise((resolve) => {
        renderer.render(scene, camera);
        canvas.toBlob(resolve, strMime);
    });
}

It is working fine if I press Enter key from keyboard.
But as long as I create Button to call the function snapShot, it gives me error:

TypeError: 'get' on proxy: property 'modelViewMatrix' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '#<Matrix4>' but got '#<Matrix4>')
at renderObject (three.module.js:29236:1)
at renderObjects (three.module.js:29236:1)
at renderScene (three.module.js:29014:1)
at WebGLRenderer.render (three.module.js:28974:1)
at Proxy.snapShot (VM19789 Scene.js:92:14)
at Proxy.testSnap (VM19789 Scene.js:74:35)
at Proxy.testClick (SceneGui.vue:264:1)
at onClick._cache.<computed>._cache.<computed> (SceneGui.vue:36:1)
at callWithErrorHandling (runtime-core.esm-bundler.js:158:1)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:166:1)

I get the same error even if I use canvas.toDataURL. I don’t know what’s wrong. Can anyone guide me if I am doing mistake?

2

Has been resolved at stackoverflow