无法在react-三/drei/native中使用远程url加载纹理

Question

我正在尝试使用加载图像纹理useTexture并将其应用到meshStandardMaterial我的反应本机应用程序中。当我从本地资源文件夹导入图像时，纹理工作正常。但是，当我将图像更改为远程 URL 时，纹理不会被应用，材质会呈现黑色。我添加了下面的代码

import React, { Suspense, useRef } from 'react';
import { View } from 'react-native';
import { Canvas } from '@react-three/fiber/native';
import { useTexture } from '@react-three/drei/native';
import useWindowDimensions from 'react-native/Libraries/Utilities/useWindowDimensions';
import localTexturePath from './assets/duck_texture.png'

function Plane() {
  const ref = useRef();
  // THIS DOESN'T WORK
  const textureUrl = 'https://cdntest.metatube.studio/public/Texture.png'
  // THIS WORKS
  // const textureUrl = localTexturePath
  useTexture(textureUrl, (t) => {
    ref.current.map = t
    ref.current.needsUpdate = true
  })
  return(
    <mesh>
      <planeBufferGeometry attach="geometry" args={[3, 3]} />
      <meshStandardMaterial ref={ref} attach="material" color="orange" />
    </mesh>
  )
}

export default function App() {
  const { width, height } = useWindowDimensions();
  return (
    <View
      style={{
        height,
        width,
        backgroundColor: '#FFA000',
      }}
    >
      <Canvas
        onCreated={(s) => {
          s.setSize(width, height);
        }}
        gl={{ physicallyCorrectLights: true }}
        camera={{ position: [-6, 0, 16], fov: 36 }}
      >
        <color attach="background" args={[0xe2f4df]} />
        <ambientLight />
        <directionalLight intensity={1.1} position={[0.5, 0, 0.866]} />
        <directionalLight intensity={0.8} position={[-6, 2, 2]} />
        <Suspense>
          <Plane />
        </Suspense>
      </Canvas>
    </View>
  );
}

ThreeJs 确实支持使用远程 URL 加载纹理。drei 在react-native 中的这种行为是预期的吗？如果是，如何将远程 URL 中的纹理应用到移动设备中的材质？以下是相关依赖及其版本

"@react-three/drei": "^9.11.3",
"@react-three/fiber": "^8.0.21",
"expo": "~45.0.0",
"expo-gl": "~11.3.0",
"react": "18.1.0",
"react-native": "0.69.0-rc.3",
"three": "0.141.0"