How to fix undefined is not a function in react native?

I found a class component for table data and tested it, working.

test.jsx

import React, { Component } from "react";
import { StyleSheet, View } from "react-native";
import {
  Table,
  TableWrapper,
  Row,
  Rows,
  Col,
  Cols,
  Cell,
} from "react-native-table-component";

export default class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      HeadTable: ("Head1", "Head2", "Head3", "Head4", "Head5"),
      DataTable: (
        ("1", "2", "3", "4", "5"),
        ("a", "b", "c", "d", "e"),
        ("1", "2", "3", "4", "5"),
        ("a", "b", "c", "d", "e"),
        ("1", "2", "3", "4", "5"),
      ),
    };
  }
  render() {
    const state = this.state;
    return (
      <View style={styles.container}>
        <Table borderStyle={{ borderWidth: 1, borderColor: "#ffa1d2" }}>
          <Row
            data={state.HeadTable}
            style={styles.HeadStyle}
            textStyle={styles.TableText}
          />
          <Rows data={state.DataTable} textStyle={styles.TableText} />
        </Table>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 18,
    paddingTop: 35,
    backgroundColor: "#ffffff",
  },
  HeadStyle: {
    height: 50,
    alignContent: "center",
    backgroundColor: "#ffe0f0",
  },
  TableText: {
    margin: 10,
  },
});

So, I tried to change it as function component and using useState for state management.

testing1.jsx

import React, { Component, useState } from "react";
import { StyleSheet, View } from "react-native";
import {
  Table,
  TableWrapper,
  Row,
  Rows,
  Col,
  Cols,
  Cell,
} from "react-native-table-component";

export default function Test1(props) {
  const tableHeader = useState(("Head1", "Head2", "Head3", "Head4", "Head5"));
  const tableData = useState((
    ("1", "2", "3", "4", "5"),
    ("a", "b", "c", "d", "e"),
    ("1", "2", "3", "4", "5"),
    ("a", "b", "c", "d", "e"),
    ("1", "2", "3", "4", "5"),
  ));
  console.log(tableHeader);
  console.log(tableData);
  return (
    <View style={styles.container}>
      <Table borderStyle={{ borderWidth: 1, borderColor: "#ffa1d2" }}>
        <Row
          data={tableHeader}
          style={styles.HeadStyle}
          textStyle={styles.TableText}
        />
        <Rows data={tableData} textStyle={styles.TableText} />
      </Table>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 18,
    paddingTop: 35,
    backgroundColor: "#ffffff",
  },
  HeadStyle: {
    height: 50,
    alignContent: "center",
    backgroundColor: "#ffe0f0",
  },
  TableText: {
    margin: 10,
  },
});

But, getting this error.

TypeError: undefined is not a function (near '...data.map...')

This error is located at:
    in Row (at rows.js:44)
    in RCTView (at View.js:34)
    in View (at rows.js:40)
    in Rows (at test1.jsx:32)
    in RCTView (at View.js:34)
    in View (at table.js:26)
    in Table (at test1.jsx:26)
    in RCTView (at View.js:34)
    in View (at test1.jsx:25)
    in Test1 (at App.js:11)
    in App (created by ExpoRoot)
    in ExpoRoot (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)

Any suggestions on how to add similar styling if this doesn’t work?
My main idea is to add table like structure to my elements with responsive feature to it when I click on them