How do I get THREE.DataTexture to work with react-three-fiber?

[AlexanderZeilmann]

I am having difficulties getting THREE.DataTexture to work in react-three-fiber.

Here is an old codepen I found that renders a DataTexture using pure three.js.
And here is the conversion to react-three-fiber, which does not render the DataTexture.

I also used a variety of data format without any success. What am I missing?

import React, { useMemo } from 'react'
import { Canvas } from '@react-three/fiber'
import * as THREE from 'three'

function DataTexturePlane() {
  const side = 32
  const amount = side * side

  const data = useMemo(() => {
    const array = new Uint8Array(amount)
    for (let i = 0; i < amount; i++) {
      array[i] = Math.random() * 256 // Random RGBA values
    }
    return array
  }, [amount])

  const dataTex = useMemo(() => {
    const texture = new THREE.DataTexture(data, side, side, THREE.LuminanceFormat, THREE.UnsignedByteType)
    texture.magFilter = THREE.NearestFilter
    texture.needsUpdate = true
    return texture
  }, [data, side])

  return (
    <mesh>
      <planeGeometry args={[15, 15]} />
      <meshBasicMaterial color={0x4422ff} alphaMap={dataTex} transparent />
    </mesh>
  )
}

function Scene() {
  return (
    <Canvas camera={{ position: [0, 0, 20], fov: 75 }}>
      <DataTexturePlane />
    </Canvas>
  )
}

export default function App() {
  return (
    <div className="container" style={{ width: 750, height: 750 }}>
      <Scene />
    </div>
  )
}

[AlexanderZeilmann]

Okay, I got it working using RGBAFormat and similar formats, but I have no clue why LuminanceFormat and LuminanceAlphaFormat don't work