Threejs How to pass dynamic Texture data from an arry for each Geometry?

Questions
,
1

I am new in threejs and using it on my nextjs project. here is my array where I have dynamic image name those are all located in my public folder

  const test =  [{
    image_url: "html.png"
   },
    {
   image_url: "css.png"
   },

  ]

now my Geometry look like this:

enter image description here

as I have two data in my array so u can see two icosahedronGeometry. here my jsx code:

{test.map((data,index)=>(<>
   <div className='w-28 h-28' key={index} >
    <SkillCanvasfrom   />
   </div>
</>))}

my threejs code:

const Skill = () =>  {
   
 
 const [decal] =    useTexture(["html.png"]) 
  return (
      <>
 
       <Float speed={1.75} rotationIntensity={1} floatIntensity={2}>
 <ambientLight  intensity={1}/>
  <directionalLight position={[0,0,0.5]}/>
   

       <mesh castShadow receiveShadow scale={2.75}>
        <icosahedronGeometry args={[1,1]}/> 
        <meshStandardMaterial  color="fff8eb"
        polygonOffset
        polygonOffsetFactor={-5}
        flatShading
        />
        
        <Decal
        position={[0,0,1]}
        map = {decal}
        rotation={[2* Math.PI ,0 ,6.25]}
        flatShading
        />
   
       </mesh>
  
       </Float>
 
    </>

    
  )
}

const SkillCanvas = () => {
  return(<>
   
   <Canvas  >
      <OrbitControls enableZoom={false}/>
    <Skill    />
   </Canvas>
  
  
  </>)
}


export default SkillCanvas

I want to know how to dynamically pass the image name from my array? I tried below code where trying to pass image_name as props

const Skill = (props) =>  {
 const [decal] =    useTexture([props.image_url]) ....

then in my SkillCanvas

const SkillCanvas = ({image_url}) => {
  return(<>
   
   <Canvas  >
      <OrbitControls enableZoom={false}/>
    <Skill  image={image_url}  />
   </Canvas>
  
  
  </>)
}

then in my jsx

  {test.map((data,index)=>(<>
    <div className='w-28 h-28' key={index} >
       <SkillCanvasfrom image={data.image_url}  />
      </div>
      </>))}

getting this error

Unhandled Runtime Error
Error: Could not load undefined: undefined
2

Please show either full error stack + message or full code of the related components - otherwise it’s hard to tell which part exactly could be undefined (optionally, just console.info variables / props in components and see where stuff is undefined while it should be defined. But that error looks more like Next.js issue, rather than JS itself.)

3

Thanks for your comment. Later I invetiage that I was making a mistake in passing props.