'useResource' is not exported from '@react-three/fiber'

[bolti95]

I am replicating an example I found of a skybox shape. I get the error 'useResource' is not exported from '@react-three/fiber'. I want to reuse the material across some instances which I'll add.

import * as THREE from "three";
import React, { Suspense, useRef, useState } from "react";
import { useFrame, useResource  } from "@react-three/fiber";
import { Icosahedron, MeshDistortMaterial, useCubeTexture, useTexture} from "@react-three/drei";


function Movement({material}) {
    const main = useRef()
     // rotation following positions
    useFrame(({ clock, mouse }) => {
        main.current.rotation.z = clock.getElapsedTime()
        main.current.rotation.y = THREE.MathUtils.lerp(main.current.rotation.y, mouse.x * Math.PI, 0.1)
        main.current.rotation.x = THREE.MathUtils.lerp(main.current.rotation.x, mouse.y * Math.PI, 0.1)
    })
    return (
    <Icosahedron args={[1, 4]} ref={main} material={material} position={[ 0,0,0 ]} />
    )
}

export function ReflectiveShape() {
    const bumpMap = useTexture("/bump.jpg")
    const envMap = useCubeTexture(["", "", "", "", "", ""], { path: "/cube/" })
    const [matRef, material] = useResource()


    return (
    <>
        <MeshDistortMaterial
                ref={matRef}
                envMap={envMap}
                bumpMap={bumpMap}
                color={"#FF1493"}
                roughness={0.1}
                metalness={1}
                bumpScale={0.005}
                clearcoat={1}
                clearcoatRoughness={1}
                radius={1}
                distort={0.4}
              />
              {material && <Movement material={material} />}
      
    </>
  )
}

I tried replacing with the line
const [material, set] = useState()

but this didn't work