Перерисовка компонентов приводит к сбою приложения - Expo

Я изучаю реакцию-native/expo.

Когда я что-нибудь печатаю, вся страница перерисовывается. Я знаю это, потому что в коде я загружаю изображение, а в консоли вижу uri изображения. Поэтому, когда я печатаю, я вижу это снова и снова, пока приложение не вылетает.

Код JS Fiddle

Я загрузил сюда весь код, потому что он слишком длинный.

Порядок действий: заполните форму, при необходимости загрузите изображение и нажмите кнопку подтверждения.

Я пробовал использовать useCallback, но безуспешно.

МРЭ по запросу:

import React, { useState, useCallback } from 'react';
import { View, TextInput, Text, StyleSheet, TouchableOpacity, Image  } from 'react-native';
import KeyboardWrapper from '../KeyboardWrapper';
import * as ImagePicker from 'expo-image-picker';

const FormComponent = ({ onSave }) => {
  const [formData, setFormData] = useState({
    driverName1: '',
      });
const [images, setImages] = useState([]); // State to store captured images

// Function to handle image capture
  const handleCaptureImage = useCallback(async () => {
    const { status } = await ImagePicker.requestCameraPermissionsAsync();
    if (status !== 'granted') {
      alert('Camera permission is required to take pictures.');
      return;
    }
  
    try {
      const result = await ImagePicker.launchCameraAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.Images,
        allowsEditing: false,
        aspect: [16, 9],
        quality: 1,
      });

      if (!result.cancelled && result.assets.length > 0) {
        // Add the new image URI to the images state
        setImages(prevImages => [...prevImages, result.assets[0].uri]);
      }
    } catch (error) {
      console.error('Error capturing image:', error);
    }
  }, []);

  const handleChangeEvent = useCallback((name, value) => {
    setFormData({ ...formData, [name]: value });
  }, [formData]);
 return (
    <KeyboardWrapper>
    <View style = {styles.container}>
      <View style = {styles.form}>
      <TextInput
        placeholder = "Sofer 1"
        value = {formData.driverName1}
        onChangeText = {(text) => handleChangeEvent('driverName1', text)}
        style = {styles.textInput}
      />
     {/* Display captured images */}
      <View style = {styles.formImgs}>
        {images.map((imageUri, index) => (
          <View key = {index} style = {styles.img}>
              {console.info('Image URI:', imageUri)}
            <Image
              source = {{ uri: imageUri }}
              style = {{ width: 100, height: 100 }}
            />
          </View>
        ))}
      </View>
      <View style = {styles.formAction}>
            <TouchableOpacity onPress = {handleCaptureImage}>
            <View style = {styles.btn}>
              <Text style = {styles.btnText}>Scaneaza</Text>
            </View>
          </TouchableOpacity>
          </View>
      </View>
    </View>
    </KeyboardWrapper>
  );
};

Короткое видео о проблеме с использованием MRE