How can I pass an array of textures into react-three-fiber mesh?

I am trying to recreate something like a virtual tour of a room given 6 sides of it, (front, back, top, bottom, left and right).

In the other code...

let loader = new THREE.TextureLoader();

    // array for holding all texutre
    let textureArray = [];

    // all texture
    let frontTexture = loader.load(front_texture);
    let backTexture = loader.load(back_texture);
    let topTexture = loader.load(top_texture);
    let bottomTexture = loader.load(bottom_texture);
    let leftTexture = loader.load(left_texture);
    let rightTexture = loader.load(right_texture);

    textureArray.push(new THREE.MeshBasicMaterial({ map: frontTexture }));
    textureArray.push(new THREE.MeshBasicMaterial({ map: backTexture }));
    textureArray.push(new THREE.MeshBasicMaterial({ map: topTexture }));
    textureArray.push(new THREE.MeshBasicMaterial({ map: bottomTexture }));
    textureArray.push(new THREE.MeshBasicMaterial({ map: leftTexture }));
    textureArray.push(new THREE.MeshBasicMaterial({ map: rightTexture }));

    for (let i = 0; i < textureArray.length; i++) {
      textureArray[i].side = THREE.BackSide;
    }

    // making cube
    let cubeGeometry = new THREE.BoxGeometry(100, 100, 100);

    //Assign cube geometry and texture to the mesh
    let mesh = new THREE.Mesh(cubeGeometry, textureArray);

    //Return the mesh
    return mesh;

In the new code...

let loader = new TextureLoader();

  // array for holding all texutre
  let textureArray = [];

  // all texture
  const frontTexture = useLoader(TextureLoader, front_texture);
  const backTexture = useLoader(TextureLoader, back_texture);
  const topTexture = useLoader(TextureLoader, top_texture);
  const bottomTexture = useLoader(TextureLoader, bottom_texture);
  const leftTexture = useLoader(TextureLoader, left_texture);
  const rightTexture = useLoader(TextureLoader, right_texture);

  textureArray.push(new MeshBasicMaterial({ map: frontTexture }));
  textureArray.push(new MeshBasicMaterial({ map: backTexture }));
  textureArray.push(new MeshBasicMaterial({ map: topTexture }));
  textureArray.push(new MeshBasicMaterial({ map: bottomTexture }));
  textureArray.push(new MeshBasicMaterial({ map: leftTexture }));
  textureArray.push(new MeshBasicMaterial({ map: rightTexture }));

  for (let i = 0; i < textureArray.length; i++) {
    textureArray[i].side = BackSide;
  }

  return (
    <mesh>
      <boxGeometry args={[1, 1, 1]} />
      <meshBasicMaterial map={frontTexture}  />
    </mesh>
  );

I want to achieve the same result as the code above, but using react-three-fiber or react-three-drei.