I am using Formik , i have a MapScreen where i am getting the location and setting it to the state and I am using AppFormLocation component to validate the field , but when i select the the location and it gets displayed on the text field and the error gets removed but when i try to sumbit the form the error is still there behind the scene its preventing me to submit the form

```JavaScript

const AppFormLocation = ({ name, value, setError, ...otherProps }) => {
  const {
    setFieldTouched,
    errors,
    touched,
    setFieldValue,
    handleChange,
    values,
  } = useFormikContext();

  const shouldShowError = touched[name] && !value;
  console.log("shop locations=>", errors[name]);
  const handleBlur = () => {
    setFieldTouched(name);
    if (!value) {
      setError(true);
    } else {
      setError(false);
    }
  };

  return (
    <>
      <AppTextInput
        value={value}
        onBlur={handleBlur}
        onChangeText={handleChange(name)}
        {...otherProps}
      />
      {shouldShowError && (
        <ErrorMessage error={errors[name]} visible={shouldShowError} />
      )}
    </>
  );
};
///Parent Component
const validationSchema = Yup.object().shape({
  cnic: Yup.string()
    .matches(/^d{13}$/, "Invalid NIC Number")
    .required("NIC Number is required"),
  shopCategory: Yup.object().nullable().required().label("Shop Category"),
  shopName: Yup.string().required().label("Shop Name").max(20),
  shopLocation: Yup.string()
    .required("Shop Location is Required")
    .label("Shop Location"),
});

const OwnerCompleteProfile = ({ navigation, route }) => {
  const [userData, setUserData] = useState(route.params.info);
  const [selectedItem, setIsSelectedItem] = useState();
  const [selectedLocation, setSelectedLocation] = useState(null);
  const [checked, setChecked] = useState(false);
  const toggleCheckbox = () => setChecked(!checked);
  const [error, setError] = useState(false); // State to manage error
  const handleSelectItem = (item) => {
    setIsSelectedItem(item);
  };

  const { location } = route.params || {};

  useEffect(() => {
    if (location) {
      // console.log("location: =>", location);
      const concatenatedLocation = `${location?.reverseGeocodeName || ""} ${
        location?.description || ""
      }`;
      handleChangeLocation(concatenatedLocation.trim());
    }
  }, [location]);

  const handleChangeLocation = (locationData) => {
    setSelectedLocation(locationData);
    if (!locationData) {
      setError(true);
    } else {
      setError(false);
    }
  };

  console.log("error:", error);
  const handleMapView = () => {
    navigation.navigate("MapScreen", {
      onLocationSelect: selectedLocation,
    });
  };

  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === "ios" ? "padding" : "height"}
      keyboardVerticalOffset={Platform.OS === "ios" ? -64 : -100}
      style={{ flex: 1 }}
    >
      <AppForm
        initialValues={{
          ...userData,
          // image: "",
          cnic: "",
          shopCategory: "",
          shopName: "",
          shopLocation: selectedLocation,
          latitude: location?.longitude,
          longitude: location?.latitude,
        }}
        onSubmit={(values) =>
          navigation.navigate("ShopTimeScreen", {
            info: values,
          })
        }
        validationSchema={validationSchema}
      >
        <View style={styles.container}>
          <AppChevronLeft style={styles.backButton} />
          <AppText style={styles.text}>Complete Your Profile</AppText>
          <View style={styles.imageContainer}>
            <ImageInput />
          </View>
          <View
            style={{
              bottom: "8%",
              // backgroundColor: "yellow",
              alignItems: "center",
            }}
          >
            <AppFormField
              name="cnic"
              autoCorrect={false}
              maxLength={40}
              placeholder="CNIC"
              keyboardType="default"
            />
            <AppFormPicker
              // selectedItem={selectedItem}
              // onSelectItem={handleSelectItem}
              name="shopCategory"
              items={categories}
              placeholder="Shop Categories"
            />
            <AppFormField
              name="shopName"
              autoCorrect={false}
              maxLength={40}
              placeholder="Shop Name"
              keyboardType="default"
            />
            <View style={{ width: "100%" }}>
              <AppFormLocation
                value={selectedLocation}
                onChangeText={setSelectedLocation}
                autoCorrect={false}
                maxLength={40}
                placeholder="Shop Location"
              />
              <TouchableOpacity
                onPress={handleMapView}
                style={styles.iconContainer}
              >
                <FontAwesome5
                  name="map-marker-alt"
                  size={normalize(17)}
                  color="black"
                />
              </TouchableOpacity>
            </View>
          </View>
          <SubmitButton
            btnIconName="arrow-right"
            title="Next"
            style={styles.button}
          />
        </View>
      </AppForm>
    </KeyboardAvoidingView>
  );
};