How to dynamically render multiple model

[Obhenimen]

Hi I am trying to render multiple instance of the same model dynamically. it does not work. When i click the button i get an error too
import { useEffect, useRef, useState } from 'react';
import { StatusBar } from 'expo-status-bar';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import {
FilamentScene,
FilamentView,
DefaultLight,
Skybox,
Model,
CameraManipulator,
} from 'react-native-filament';
import * as ScreenOrientation from 'expo-screen-orientation';
import { OrbitCamera, OrbitGestureOverlay } from './OrbitCamera';

const HoverBike = require('./hover_bike_-_the_rocket.glb');

const BIKE_SPACING = 1.5;
const MAX_BIKES = 10; // Pre-mount all - no new Model/buffer when adding = no FilamentBuffer error

export default function App() {
const cameraManipulatorRef = useRef<CameraManipulator | null | undefined>(null);
const [bikeCount, setBikeCount] = useState(3);

const addBike = () => setBikeCount((n) => Math.min(n + 1, MAX_BIKES));

useEffect(() => {
async function changeScreenOrientation() {
await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT);
}
changeScreenOrientation();
}, []);

return (

      {Array.from({ length: MAX_BIKES }, (_, i) => {
        const isVisible = i < bikeCount;
        const x = isVisible ? (i - (bikeCount - 1) / 2) * BIKE_SPACING : 999;
        return (
          <Model
            key={i}
            source={HoverBike}
            transformToUnitCube
            shouldReleaseSourceData={false}
            translate={[x, 0, 0]}
            scale={isVisible ? undefined : [0, 0, 0]}
          />
        );
      })}
      
      <OrbitCamera
        orbitHomePosition={[0, 5, 20]}
        targetPosition={[0, 0, 0]}
        zoomSpeed={0.1}
        onManipulatorReady={(m) => {
          cameraManipulatorRef.current = m;
        }}
      />
    </FilamentView>
  </FilamentScene>
  
  <OrbitGestureOverlay cameraManipulatorRef={cameraManipulatorRef} />
  <View style={styles.addButtonContainer} pointerEvents="box-none">
    <Pressable style={({ pressed }) => [styles.addButton, pressed && styles.addButtonPressed]} onPress={addBike}>
      <Text style={styles.addButtonText}>Add Motorbike</Text>
    </Pressable>
  </View>
  <StatusBar style="light" />
</View>

);
}

const styles = StyleSheet.create({
container: { flex: 1, backgroundColor: '#000' },
filament: { flex: 1 },
addButtonContainer: {
position: 'absolute',
bottom: 32,
left: 0,
right: 0,
alignItems: 'center',
},
addButton: {
backgroundColor: '#3B82F6',
paddingHorizontal: 24,
paddingVertical: 12,
borderRadius: 12,
},
addButtonPressed: { opacity: 0.8 },
addButtonText: { color: '#fff', fontSize: 16, fontWeight: '600' },
});