[Error: Call to function 'ExponentCamera.takePicture' has been rejected. Caused by: java.lang.RuntimeException: autoFocus failed]

Question

#Find.jsx

import {
  View,
  Text,
  FlatList,
  TouchableOpacity,
  StyleSheet,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import Header from "./Header";
import CaptureObject from "./CaptureObject";
import ObjectList from "./ObjectList";
import BoxButton from "./BoxButton";
import findObject from "../api";
import { useNavigation } from "@react-navigation/native";
import { useRoute } from "@react-navigation/native";
import { useIsFocused } from "@react-navigation/native";
import { Camera } from "expo-camera";

const Find = () => {
  const btnOptions = ["Find Object"];
  const [cameraRef, setCameraRef] = useState(null);
  const [detecting, setDetecting] = useState(false);
  const [selected, setSelected] = useState(false);
  const navigation = useNavigation();
  const route = useRoute();
  const inputObjectName = route.params?.userInput || "";

  const handleDetection = async (cameraRef) => {
    console.log("coming to handleDetection");
    if (cameraRef) {
      try {
        await cameraRef.current?.autoFocusAsync();
        const photo = await cameraRef.takePictureAsync();
        console.log(photo.uri);
        const data = findObject({ photoURI: photo.uri, objectName: "tv" });
      } catch (error) {
        console.log(error);
      }
    }
  };
  const handleOnPress = () => {
    selected ? setSelected(false) : setSelected(true);
    if (!detecting) {
      setDetecting(true);
      navigation.navigate("ObjectList");
    } else {
      setDetecting(false);
    }
  };

  useEffect(() => {
    handleDetection(cameraRef);
  }, [cameraRef]);

  return (
    <SafeAreaView>
      <Header />
      <View style={styles.camera}>
        <CaptureObject setCameraRef={setCameraRef} />
      </View>
      <View
        style={{
          width: "100%",
          height: 90,
          backgroundColor: "#808080",
          paddingTop: 8,
          alignItems: "center",
        }}
      >
        <FlatList
          data={btnOptions}
          renderItem={({ item }) => (
            <BoxButton
              label={item}
              handleOnPress={handleOnPress}
              selected={selected}
            />
          )}
          keyExtractor={(item) => item}
          contentContainerStyle={{ columnGap: 50 }}
          horizontal
        />
      </View>
    </SafeAreaView>
  );
};

export default Find;

#CaptureObject.jsx

import { Camera } from 'expo-camera';
import { Text, View, TouchableOpacity, Platform, StyleSheet } from "react-native";
import { useIsFocused } from '@react-navigation/native';


const CaptureObject = ({ setCameraRef }) => {
  const [hasPermission, setHasPermission] = useState(null);
  // const [cameraRef, setCameraRef] = useState(null);
  const isFocused = useIsFocused();

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestCameraPermissionsAsync();
      setHasPermission(status === "granted");
    })();

  }, []);

  if (hasPermission === null) {
    return <View />;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }

  return (
    <View style={styles.camera}>
      {isFocused && <Camera
        style={styles.camera}
        ref={(ref) => setCameraRef(ref)}
        type={Camera.Constants.Type.back}
        focusMode={Camera.Constants.auto}
        
      />}
    </View>
  );
};


export default CaptureObject;


const styles = StyleSheet.create({
  camera: {
    width: '100%',
    height: Platform.OS === 'ios'? 390 : 550
  },
  button: {
    backgroundColor: '#8F00FF',
    padding: 20,
  },
  buttonText: {
    fontSize: 10,
    color: '#000000',
  },
});

#ObjectList.jsx

import { SafeAreaView } from "react-native-safe-area-context";
import { View, Text, FlatList, Button, TouchableOpacity } from "react-native";
import { useNavigation, useRoute } from "@react-navigation/native";

const ObjectList = () => {
  const navigation = useNavigation();
  const route = useRoute();
  const handleSubmit = (text) => {

    navigation.navigate("Find", { userInput: text});

  };

  const objectNames = [
    "person",
    "bicycle",
    "car",
    "motorcycle",
    "airplane",
    "bus",
    "train",
    "truck",
    "boat",
    "traffic light",
    "fire hydrant",
    "stop sign",
    "parking meter",
    "bench",
    "bird",
    "cat",
    "dog",
    "horse",
    "sheep",
    "cow",
    "elephant",
    "bear",
    "zebra",
    "giraffe",
    "backpack",
    "umbrella",
    "handbag",
    "tie",
    "suitcase",
    "frisbee",
    "skis",
    "snowboard",
    "sports ball",
    "kite",
    "baseball bat",
    "baseball glove",
    "skateboard",
    "surfboard",
    "tennis racket",
    "bottle",
    "wine glass",
    "cup",
    "fork",
    "knife",
    "spoon",
    "bowl",
    "banana",
    "apple",
    "sandwich",
    "orange",
    "broccoli",
    "carrot",
    "hot dog",
    "pizza",
    "donut",
    "cake",
    "chair",
    "couch",
    "potted plant",
    "bed",
    "dining table",
    "toilet",
    "tv",
    "laptop",
    "mouse",
    "remote",
    "keyboard",
    "cell phone",
    "microwave",
    "oven",
    "toaster",
    "sink",
    "refrigerator",
    "book",
    "clock",
    "vase",
    "scissors",
    "teddy bear",
    "hair drier",
    "toothbrush",
  ];
  return (
    <SafeAreaView>
      <FlatList
        data={objectNames}
        renderItem={({ item }) => (
          <TouchableOpacity onPress={() => handleSubmit(item)}>
            <Text>{item}</Text>
          </TouchableOpacity>
        )}
        keyExtractor={(item) => item}
      />
    </SafeAreaView>
  );
};

export default ObjectList;

First I am rendering Find.jsx then navigating to ObjectList.jsx and from there again navigating to Find.jsx , during the second time navigating getting this error. When first time rendering Find.jsx it can take picture but for the next time it is giving error