how to implement a flatlist in a collapse component react native

Question

I created a custom component that consist of a flatList to display a kind like a grid in a collapse component. I am getting an error attached to this post when I tried to use a flatlist inside collpase component.

my flatListcomponent******

import React from "react";
import {
  SafeAreaView,
  View,
  FlatList,
  StyleSheet,
  Text,
  StatusBar,
  TouchableHighlight,
} from "react-native";

const DATA = [
  {
    id: "TR",
    title: "TRIM",
  },
  {
    id: "DC",
    title: "DEEP CONDITION",
  },
  {
    id: "BR",
    title: "BRAIDS",
  },

  {
    id: "TW",
    title: "TWISTS",
  },
  {
    id: "FA",
    title: "FADE",
  },
  {
    id: "CO",
    title: "COLOR",
  },
  {
    id: "LU",
    title: "LINE-UP",
  },
  {
    id: "TU",
    title: "TOUCH-UP",
  },
  {
    id: "SH",
    title: "SHAMPOO",
  },
  {
    id: "DL",
    title: "DREAD LOCKS",
  },
];

const Item = ({ title, onPress }) => (
  <TouchableHighlight
    //onHideUnderlayColor,
    onPress={() => console.log("tapped", title)}
  >
    <View style={styles.item}>
      <Text style={styles.title}>{title}</Text>
    </View>
  </TouchableHighlight>
);

export default function FlatListComponent({ onPress }) {
  const renderItem = ({ item }) => <Item title={item.title} />;
  const numColumns = 2;

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
        numColumns={numColumns}
        //onPress={() => console.log("Message selected", item)}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "#2B6565",
    marginTop: StatusBar.currentHeight || 0,
    alignItems: "center",
    height: 100,
    margin: 5,
  },
  item: {
    backgroundColor: "#084F52",
    padding: 15,
    marginVertical: 3,
    marginHorizontal: 3,
    width: 200,
    height: 55,
  },
  title: {
    fontSize: 12,
    color: "#FFFFFF",
    justifyContent: "center",
    padding: 10,
    fontWeight: "bold",
    letterSpacing: 3,
  },
});

My main screen where I want to display my FaltList component:

<Collapse>
                <CollapseHeader>
                  <View style={styles.heading_container}>
                    <Text style={styles.top_heading_text}>SERVICES</Text>
                  </View>
                </CollapseHeader>
                <CollapseBody>
                  <FlatListComponent />
                </CollapseBody>
              </Collapse>

The error:

I would appreciate any help. Thank you!