Add MeshPhongMaterial to primitive in react

I can’t seem to know how to add MeshPhongMaterial to my primitive object without removing the mtl

const materials = useLoader(MTLLoader, ob[1].mtl)
  let object = useLoader(OBJLoader, ob[1].obj, loader => {
  const {y}=useControls("Light",{y:{value:20,step:0.2}})
  const {x}=useControls("Light",{x:{value:0,step:0.2}})
  const {z}=useControls("Light",{z:{value:100,step:0.2}})
  const {specular,shininess}=useControls({specular:"#fff",shininess:50})
return (
<Canvas style={{"marginTop":"20vh",height:"400px"}}>
<ambientLight intensity={0.25} />
  <pointLight  position={[x,y,z]} intensity={0.3}/>
  <pointLight position={[x,y,-80]} intensity={0.3}/>
  <OrbitControls  maxDistance={90} />
  <meshPhongMaterial  shininess={shininess} specular={specular}/>
  <mesh >
  <primitive object={object}   />

I also tried

 let glitter=new MeshPhongMaterial()
  glitter.specular =new Color(0.886, 0.866, 0.095);
<mesh  material={glitter}>
  <primitive object={object}   />

it didn’t work aswell

object is most likely a group, you can’t put a material into a group. the thing with primitive is that it’s to be treated as a static, foreign object that you just dump into the scene. what you’re trying there seems odd.

i would suggest you do not use obj/mtl but gltf, you have a faster, smaller file, and you can do this: GitHub - pmndrs/gltfjsx: 🎮 Turns GLTFs into JSX components

you can, in theory do the same with your obj if you know the structure React Three Fiber Documentation

const object = useLoader(OBJLoader, url)
const { nodes, materials } = useGraph(object)
return (
    <mesh geometry={} material={materials.brass} />
    <mesh geometry={}>
      <meshStandardMaterial color="peachpuff" />

to lay out the file declaratively like that is in general preferable to reaching into the data and mutating, because that will always destroy the source data and re-use is gone.