React Native Table Компонент tableTitle не отображается должным образом

Question

Я разрабатываю приложение React Native. Ниже приведен код, в котором я не могу правильно отображать дату таблицы:

AttendanceScreen. js

import React, { useState } from 'react';
import { View,StyleSheet} from 'react-native';
import DatePicker from 'react-native-datepicker';
import * as attendanceActions from '../../store/actions/attendance';
import { useDispatch} from 'react-redux';
import { Table, TableWrapper, Row, Rows, Col } from 'react-native-table-component';


const AttendanceScreen = props => {
const tableTitle = [];
 for (let i=1 ; i<=4 ; i+=1){
  tableTitle.push(`${i}`)
 }

const tableData = [
  ['1', '2', '3'],
  ['a', 'b', 'c'],
  ['1', '2', '3'],
  ['a', 'b', 'c']
]

const dispatch = useDispatch();
 const [date, setDate] = useState(new Date)

const goToDateAPI =  async (newDate) => {

// console.log(newDate);  
let action
  action =  attendanceActions.fetchStudentAttendance(
          newDate
           );  
           await dispatch(action); 

           const studentattendance = useSelector(state => 
           state.attendance.studentattendance);
           const dispatch = useDispatch();
           const [isLoading,setIsLoading] = useState(false);
           
           useEffect(() => {
             const loadStudentAttendance= async ()=>{
              setIsLoading(true);
               await dispatch(attendanceActions.fetchStudentAttendance());
               setIsLoading(false);
               //setIsLoading(true);
            };
            loadStudentAttendance();
           },[dispatch]);

           props.navigation.navigate({routeName:('Attendance'),params:
            {
              dateValue:newDate
            }
        })
  };

  
  
return (
    <View>  
      <View> 
        <DatePicker
            style={{ width: 200 }}
            date={date}
            mode="date"
            placeholder="select date"
            format="DD MMM YYYY"
            minDate="01 Jan 2020"
            maxDate="30 Dec 2021"
            confirmBtnText="Confirm"
            cancelBtnText="Cancel"
            customStyles={{
                dateIcon: {
                    position: 'absolute',
                    left: 0,
                    top: 4,
                    marginLeft: 0
                },
                dateInput: {
                    marginLeft: 36
                }
                
            }}
          
            onDateChange={(newDate) => {setDate(newDate) ; 
             // console.log(newDate); 
              {goToDateAPI(newDate)}}}
        />

    
      
    </View>
         <View style={styles.container}>
         <Table borderStyle={{borderWidth: 1}}>
          
           <TableWrapper style={styles.wrapper}>
             <Col data={tableTitle} style={styles.title} heightArr={[28,28]} textStyle={styles.text}/>
             <Rows data={tableData} flexArr={[2, 1, 1]} style={styles.row} textStyle={styles.text}/>
           </TableWrapper>
         </Table>
       </View>
       </View>
    )
    };

    const styles = StyleSheet.create({container: { flex: 1, padding: 16, paddingTop: 30, 
    backgroundColor: '#fff' },
    
    wrapper: { flexDirection: 'row' },
    title: { flex: 1, backgroundColor: '#f6f8fa' },
    row: {  height: 28  },
    text: { textAlign: 'center' }
    });

экспорт AttendanceScreen по умолчанию ;

Когда я запускаю программу, я получаю следующую таблицу:

   1    1   2   3

   2    a   b   c

        1   2   3

        a   b   c

3 и 4 отсутствуют в tableTitle. Таблица не отображается должным образом.

Может ли кто-нибудь помочь мне, где я ошибаюсь. Спасибо заранее.