Best practice for using BottomSheet in case of many rows ?

[NguyenHoangMinhkkkk]

I have a screen with many DATAs to show inside a scrollview (or maybe a flatlist) and each data item have the action to use the Bottomsheet for showing their description content.

First Approach => Each DataItem have its BottomSheet (dont know how to do)
Second Approach => Only one Bottomsheet with content is a State, but need to setState each time press the button to expand the sheet, the setState may cause glitching animation

How to make best practice for my case ?

<Screen>
  <ScrollView>
  {
    DATAs.map(dataItem => {
      return <ComponentRenderData  data={dataItem} />
    })
  }
  </ScrollView>
</Screen>

const ComponentRenderData = ({data}) => {
  return <View>
    <DataContent data={data} />

    <Button title={"More info"} onPress={() => ref.current.expand()}/>
    
    <BottomSheet ref={ref}>
      <Text>{data.descriptionInfo}</Text>
    </BottomSheet>
  </View>
}