Three Fiber not showing transparent png texture

Question

I would like to display a small logo, a transparent png, on the back of each tile in my game. However, the png is not displaying.

Here is the png:

Here is the code for the texture:

import { TextureLoader } from 'three/src/loaders/TextureLoader';

import { useLoader } from '@react-three/fiber'

import * as THREE from 'three'

export default function Tile() {
    ...
    const tileBackTexture = useLoader(THREE.TextureLoader, './presets_library/Tile_Back_Logo.png')
    const tileBackTextureMaterial = new THREE.MeshBasicMaterial({ 
        map: tileBackTexture, 
        alphaMap: tileBackTexture,
        transparent: true,
        side: THREE.DoubleSide,
        alphaTest: 0.5,
        depthWrite: false,
        opacity: 0.0,
    });
    ...
    return (
        <mesh geometry={nodes.Tile_Back_Face.geometry} material={tileBackTextureMaterial} />
    )
}

Here is the result:

With the model, I made a separate, floating face just for the loaded texture. I have made sure that the png itself had a transparent background. With loading the texture, I made sure transparent was set to true, map was set to the loaded png, that alphaMap was set to the loaded png, but nothing changed.

I've also tried making the png smaller, adding an opacity attribute, but I can't seem to find what might be preventing it from showing up.

If anyone knows what might be going wrong, please let me know.

Thank you.

Update:

Even drawing the image on a canvas and using that image to create the texture and material doesn't show it:

    let img = new Image();
    img.crossOrigin='Anonymous';
    
    let ctx = canvasRef.current.getContext('2d', { alpha: true, desynchronized: false, colorSpace: 'srgb', willReadFrequently: true})
    ctx.globalCompositeOperation = "copy";

    img.onload = function () {
        ctx.width = img.width;
        ctx.height = img.height;
        ctx.imageSmoothingEnabled = false;
        
        ctx.drawImage(img, 0, 0);
    }

    img.src = './presets_library/Tile_Back_Logo_Small.png';
    
    const texture = new THREE.Texture(canvasRef.current);
    
    const material = new THREE.MeshBasicMaterial({ 
        map: texture,
        alphaMap: texture, 
    });

The canvasRef is displaying the png, yet for some reason can't be seen on the tiles.

Answer 1

Here is the codesandbox, and it has been solved. I should have just used the useTexture hook.

Answer 2

Try this one, without THREE:

const tex = useLoader(TextureLoader, 'tex.jpg')

https://docs.pmnd.rs/react-three-fiber/tutorials/loading-textures