Only one object is rendered

Questions
1

I am trying to render multiple asteroids from an asteroid model that I made in the app file but only one gets rendered. I use this function for generating positions and velocities:

const asteroidsCount=20;
function generateAsteroids(count){
  const asteroids=[];
  for(let i=0;i<count;i++){
    asteroids.push({
      position: [
         Math.random() *  50 - 25,
         Math.random() * 10-5,
         Math.random() *  50 - 25,
      ],
      velocity: [
        Math.random() * 0.05 - 0.025,
        Math.random() * 0.05 - 0.025,
        Math.random() * 0.05 - 0.025,
      ],});}
  return asteroids;}
function App() {
  const asteroids=generateAsteroids(asteroidsCount)
        {asteroids.map((asteroid, index) => (
            <PassingAsteroids
              key={`asteroid-${index}`} 
              velocity={asteroid.velocity}
              position={asteroid.position}
              modelPath={"/models/asteroid.glb"}
            />
          ))}

and this is the asteroid file that I import as a component:

export function PassingAsteroids(props) {

    const asteroidRef = useRef(null);

    const asteroidModel= useLoader(GLTFLoader, props.modelPath);
    useEffect(() => {
        if (asteroidRef.current) {
          asteroidRef.current.position.set(...props.position);
        }
      }, [props.position]);
    useFrame(() => {
        if (asteroidRef.current) {
        asteroidRef.current.position.x += props.velocity[0];
        asteroidRef.current.position.y += props.velocity[1];
        asteroidRef.current.position.z += props.velocity[2];
        asteroidRef.current.rotation.x += 0.01;
        asteroidRef.current.rotation.y += 0.01;
        }});
    return(
        <group ref={asteroidRef}>
            <primitive object={asteroidModel.scene}/>
        </group> );