TypeError: undefined не является объектом (оценка _ref.initialProps) реагирует на собственный хук камеры

Question

Я новичок, чтобы реагировать на родные и хуки в целом. Я пытаюсь открыть собственную камеру, реагирующую на нажатие кнопки. для этого я использую пример реагирования на собственные крючки камеры. Частью, вызывающей ошибку, является функция camroute. мой код выглядит так.

import * as React from 'react';
import RNPickerSelect from 'react-native-picker-select';
import {
  Text,
  Button,
  TextInput,
  View,
  StyleSheet,
  TouchableOpacity,
  Dimensions,
} from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';
import FilePickerManager from 'react-native-file-picker';
import DocumentPicker from 'react-native-document-picker';
import { RNCamera } from 'react-native-camera';
import { useCamera } from 'react-native-camera-hooks';
import CameraRoll from "@react-native-community/cameraroll";

function fl(){
  FilePickerManager.showFilePicker((response) => {
    console.log('Response = ', response);
    str = JSON.stringify(response);
    str = JSON.stringify(response, null, 4); // (Optional) beautiful indented output.
    console.log(str); // Logs output to dev tools console.
    alert(str); // Displays output using window.alert()

    if (response.didCancel) {
      console.log('User cancelled file picker');
    }
    else if (response.error) {
      console.log('FilePickerManager Error: ', response.error);
    }
    else {
      onresponse=()=> {
        this.setState({
          file: response
        });
      }
    }
  });
}


const CamRoute = ({ initialProps }) => {
  const [
    { cameraRef, type, isRecording },
    { takePicture, setIsRecording },
  ] = useCamera(initialProps);

  return (
    <View style={{ flex: 1 }}>
      <RNCamera ref={cameraRef} type={type} style={{ flex: 1 }} />

      {!isRecording && (
        <TouchableOpacity
          onPress={async () => {
            try {
              setIsRecording(true);
              const data = await takePicture();
              console.log(data.uri);

              CameraRoll.save(data.uri);
            } finally {
              setIsRecording(false);
            }
          }}
          style={{ width: '100%', height: 45 }}
        />
      )}
    </View>
  );
};


const FirstRoute = () => ( 
  <View style = {[styles.scene, {backgroundColor: '#ffffff'}]}>
    <Text style={styles.titleText}>Type of filing</Text>
    <RNPickerSelect onValueChange = {(value) => console.log(value)}
      items = {[{label: 'Salaried',value: 'SL'},{label: 'Non Salaried',value: 'NSL'},
          {label: 'Other',value: 'OTHER'},]}
    />
    <Text style={styles.titleText}>Applicant Name:</Text>
    <TextInput placeholder = "Applicant Name as per docs"></TextInput>
    <Text style={styles.titleText}>Applicant Pan:</Text>
    <TextInput placeholder = "Applicant PAN Number"></TextInput>
    <Button
      title="Upload Income statement"
      onPress={() => fl()}
    />
    <Text>{"\n"}</Text>
    <Button
      title="Capture Income statement"
      onPress={() => CamRoute()}
    />
  </View>
);

const SecondRoute = ({ initialProps }) => {
  const [
    { cameraRef, type, isRecording },
    { takePicture, setIsRecording },
  ] = useCamera(initialProps);

  return (
    <View style={{ flex: 1 }}>
      <RNCamera ref={cameraRef} type={type} style={{ flex: 1 }} />

      {!isRecording && (
        <TouchableOpacity
          onPress={async () => {
            try {
              setIsRecording(true);
              const data = await takePicture();
              console.log(data.uri);

              CameraRoll.save(data.uri);
            } finally {
              setIsRecording(false);
            }
          }}
          style={{ width: '100%', height: 45 }}
        />
      )}
    </View>
  );
};

const ThirdRoute = () => (
  <View style={[styles.scene, { backgroundColor: '#ffa081' }]} />
);

const FourthRoute = () => (
  <View style={[styles.scene, { backgroundColor: '#ffb081' }]} />
);

const FifthRoute = () => (
  <View style={[styles.scene, { backgroundColor: '#30c081' }]} />
);

const SixthRoute = () => (
  <View style={[styles.scene, { backgroundColor: '#ecca81' }]} />
);

const initialLayout = { width: Dimensions.get('window').width };

export default function TabViewExample() {
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: 'first', title: 'IT'},
    { key: 'second', title: 'GST'},
    { key: 'third', title: 'REG'},
    { key: 'fourth', title: 'MF'},
    { key: 'fifth', title: 'INSUR' },
    { key: 'sixth', title: 'CC' },
    ]);

  const renderScene = SceneMap({
    first: FirstRoute,
    second: SecondRoute,
    third: ThirdRoute,
    fourth: FourthRoute,
    fifth: FifthRoute,
    sixth:SixthRoute,
  });

  return (
    <TabView
      navigationState={{ index, routes }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={initialLayout}
    />
  );
}

const styles = StyleSheet.create({
  scene: {
    flex: 1,
  },
  baseText: {
    fontSize: 20,
  },
  titleText: {
    fontSize: 18,
    fontWeight: "bold"
  }
});

ошибка, указанная в заголовке, возникает из-за функции CamRoute. но тот же фрагмент крючков камеры работает в SecondRoute, здесь камера открывается, и я могу делать снимки, и то же самое сохраняется во внутренней памяти.

Я подозреваю, что ошибка связана с моим неполным пониманием как работают крючки.

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