React Native render error while trying to render multiple components

Question

I want to render multiple copies of the same custom component that I built after a user presses the 'Add' button. My code is as follows:

import "react-native-get-random-values";
import { StyleSheet, TextInput, View, Text, TouchableHighlight, Button } from 'react-native';
import React, { useState } from 'react';
import { v4 as uuidv4 } from 'uuid';
import Lift from './Lift'

export default function Lifts() {
  // const [cards, setCards] = useState([{ id: uuidv4() }])
  // const onPress = () => setCards([...cards, [{ id: uuidv4() }]])
  const [cards, setCards] = useState([uuidv4()])
  const onPress = () => setCards([...cards, uuidv4()])

  const liftCards = cards.map((id) => {
    return (
      <View key={id}>
        <Lift />
      </View>
    )
  })

  return (
    <View>
      <TouchableHighlight onPress={onPress} underlayColor={'#DDDDDD'} style={styles.touchable}>
        <View style={styles.button}>
          <Text>
            Add Lift
          </Text>
        </View>
      </TouchableHighlight>
      {/* <Text style={{ alignSelf: 'center', top: 100 }}>
        {cards}
      </Text> */}
      {
        cards.map((data, id) => {
          return (
            <Text> {id} </Text>
          )
        })
      }
    </View>
  )
}

const styles = StyleSheet.create({
  button: {
    alignItems: 'center',
    borderWidth: 2,
    borderColor: 'black',
    borderRadius: 10,
    padding: 10,
  },
  touchable: {
    marginHorizontal: 10,
    top: 10
  }
})

in the above snippet is the custom component that I want to display on screen. The issue I run into is that after I click 'Add Lift' a couple of times, I get an error that says "undefined is not a function." The error I get:

ERROR  TypeError: undefined is not a function

This error is located at:
    in Lifts (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by SceneView)
    in RCTView (created by View)
    in View (created by DebugContainer)
    in DebugContainer (created by MaybeNestedStack)
    in MaybeNestedStack (created by SceneView)
    in RCTView (created by View)
    in View (created by SceneView)
    in RNSScreen (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by SceneView)
    in SceneView (created by NativeStackViewInner)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by ScreenStack)
    in RNSScreenStack (created by ScreenStack)
    in ScreenStack (created by NativeStackViewInner)
    in NativeStackViewInner (created by NativeStackView)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator (created by App)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by App)
    in App (created by withDevTools(App))
    in withDevTools(App)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent), js engine: hermes

I'm fairly confident that the issue lies within my use of the uuidv4() functionality because when I use the exact same code but print the length of the cards array with just 1, 2, 3... as id numbers instead of uuidv4(), it outputs the right number with the correct increment on every press as well. I expect the same result while using uuidv4() and the number of custom <Lift /> cards to match the length of cards

EDIT: I have provided some screenshots for the error as seen from my mobile device Error on mobile device Error on mobile device continued

Answer 1

I was unable to figure out what the issue was, but thanks to the little discussion in the comments, I was given the epiphany that something might not be linking right with the uuid dependencies. So I used a different uuid package, and it seems to be doing the trick...for now