React Native FlatList делает приложение чрезвычайно медленным после 10 элементов

Я пытаюсь создать простое приложение для секундомера в среде реагирования. Я использую AsyncStorage для хранения записанных данных о времени в локальном хранилище, а также хочу отобразить таблицу, в которой показаны все записанные времена. Основная идея заключается в том, что когда человек нажимает и удерживает анимацию LottieView, он запускает таймер, когда он нажимает, таймер останавливается, записывает в AsyncStorage, а затем обновляет таблицу.

После 10 элементов мой FlatList (внутри TimeTable.jsx) становится очень медленным, и я не знаю, почему. Я считаю, что компонент, который вызывает эту ошибку, TimeTable.jsx, но я не совсем уверен, почему.

src/components/Timer/TimeTable.jsx

import React, {useState, useEffect} from 'react'
import { StyleSheet, FlatList  } from "react-native";
import { Divider, List, ListItem } from '@ui-kitten/components'
import AsyncStorage from '@react-native-async-storage/async-storage';

const getRecordedEventsTable = async (dbKey) => {
  try {
    let currentDataArray = await AsyncStorage.getItem(dbKey);
    return currentDataArray ? JSON.parse(currentDataArray) : [];
  } catch (err) {
    console.log(err);
  }
};

const renderItem = ({ item, index }) => (
  <ListItem
  title={`${item.timeRecorded / 1000} ${index + 1}`}
  description={`${new Date(item.timestamp)} ${index + 1}`}
   />
)

export const TimeTable = ({storageKey, timerOn}) => {
  const [timeArr, setTimeArr] = useState([]);

  useEffect(() => {
    getRecordedEventsTable(storageKey).then((res) => {
        setTimeArr(res)
    })

  }, [timerOn])

  return (
      <FlatList
        style={styles.container}
        data={timeArr}
        ItemSeparatorComponent={Divider}
        renderItem={renderItem}
        keyExtractor={item => item.timestamp.toString()}
      />
  );
};

const styles = StyleSheet.create({
    container: {
      maxHeight: 200,
    },
  });

src/components/Timer/Timer.jsx

import React, {useState, useEffect, useRef} from 'react'
import {
    View,
    StyleSheet,
    Pressable,
} from 'react-native';
import {Layout, Button, Text} from '@ui-kitten/components';
import LottieView from 'lottie-react-native'
import AsyncStorage from '@react-native-async-storage/async-storage';
import {TimeTable} from './TimeTable'

const STORAGE_KEY = 'dataArray'

const styles = StyleSheet.create({
    container: {
        flex: 1, 
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#E8EDFF"
    },
    seconds: {
        fontSize: 40,
        paddingBottom: 50,
    }
})

const getRecordedEventsTable = async () => {
    try {
        let currentDataArray = await AsyncStorage.getItem(STORAGE_KEY)
        return currentDataArray ? JSON.parse(currentDataArray) : []
    } catch (err) {
        console.log(err)
    }
}

const addToRecordedEventsTable = async (item) => {
    try {
        let dataArray = await getRecordedEventsTable()
        dataArray.push(item)
    
        await AsyncStorage.setItem(
            STORAGE_KEY,
            JSON.stringify(dataArray)
            )
    } catch (err) {
        console.log(err)
    }
}

// ...

const Timer = () => {
    const [isTimerOn, setTimerOn] = useState(false)
    const [runningTime, setRunningTime] = useState(0)
    const animation = useRef(null);

    const handleOnPressOut = () => {
        setTimerOn(false)
        addToRecordedEventsTable({
            timestamp: Date.now(),
            timeRecorded: runningTime
        })

        setRunningTime(0)
    }

     useEffect(() => {
        let timer = null

        if(isTimerOn) {
            animation.current.play()

            const startTime = Date.now() - runningTime
            timer = setInterval(() => {
                setRunningTime(Date.now() - startTime)
            })
        } else if(!isTimerOn) {
            animation.current.reset()
            clearInterval(timer)
        }

        return () => clearInterval(timer)
    }, [isTimerOn])

    return (
        <View>
            <Pressable onPressIn={() => setTimerOn(true)} onPressOut={handleOnPressOut}>
                <LottieView ref={animation} style={{width: 300, height: 300}} source={require('../../../assets/record.json')} speed={1.5}/>
            </Pressable>
            <Text style={styles.seconds}>{runningTime/1000}</Text>
            <TimeTable storageKey={STORAGE_KEY} timerOn={isTimerOn} />
            <Button onPress={resetAsyncStorage}>Reset Async</Button>
        </View>
    )
}

export default Timer

Любая помощь, приветствуется. Спасибо.

РЕДАКТИРОВАТЬ: в консоли появилось следующее предупреждение:

VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. Object {
  "contentLength": 1362.5,
  "dt": 25161,
  "prevDt": 368776,

РЕДАКТИРОВАТЬ: В Timer.jsx у меня есть текстовое представление в функции рендеринга следующим образом: <Text style={styles.seconds}>{runningTime/1000}</Text> эта часть должна отображать значение секундомера и обновляться с помощью таймера. По мере того, как FlatList становится больше, эта часть становится чрезвычайно лаговой.

Я подозреваю, что, поскольку это пытается постоянно перерисовываться, дочерний компонент TimeTable.jsx также постоянно перерисовывается?