New THREE.MeshBasicMaterial not loading texture from new THREE.CanvasTexture

Good Day,

I m facing issues in loading the texture from my fabric canvas in my three js canvas cube face using THREE.MeshBasicMaterial.

When I m loading the image as texture for cube’s 5 faces using THREE.MeshBasicMaterial, then it is working fine. Which is:
new THREE.MeshBasicMaterial({map: loader.load(‘https://threejsfundamentals.org/threejs/resources/images/flower-1.jpg’)}),

But when I try to first fetch texture from my fabric canvas and then try to load that texture on my cube’s first face then it is not working which is:
const texture1 = new THREE.CanvasTexture(document.getElementById( “canvas_fabric_front” ));
new THREE.MeshBasicMaterial({map: loader.load(texture1)}),
only the first face where I m loading the fabric canvas texture is black and other faces are loaded properly.
Check this fiddle for live issue example: ( https://jsfiddle.net/Roopkamal/p5tfma4n/4/ )

Let me know if there is anybody who can help me in this.

Regards,
Roop