Getting data textures to work in react fiber

Questions
,
1

Trying to recrate this article tied to this post here but every time I just get a red plane with no mask, and as soon as I turn on the transperency the plane just dissapears.

function Plane() {
  const planeRef = React.useRef();

  const mask = [
    1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
    1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1, 1, 1, 0,
    0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 1, 1, 1,
  ];

  const data = new Uint8Array(mask.length);
  data.set(mask.map((v) => v * 255));

  const texture = React.useMemo(() => {
    const tx = new THREE.DataTexture(
      data,
      8,
      8,
      THREE.LuminanceFormat,
      THREE.UnsignedByteType
    );

    tx.flipY = true;
    tx.wrapS = THREE.ClampToEdgeWrapping;
    tx.wrapT = THREE.ClampToEdgeWrapping;
    tx.generateMipmaps = false;
    tx.magFilter = THREE.NearestFilter;
    tx.minFilter = THREE.NearestFilter;
    tx.needsUpdate = true;
    return tx;
  }, [data]);

  return (
    <mesh ref={planeRef} rotation={[Math.PI / 2, 0, 0]} position={[0, 2, -1]}>
      <planeGeometry args={[1, 1]} />
      <meshBasicMaterial
        color={0xff0000}
        alphaMap={texture}
        side={THREE.DoubleSide}
        //transparent
        opacity={1}
      />
    </mesh>
  );
}

Any ideas on what I might be doing wrong ?