How to use useEffect to change boolean values - react-native

Question

I have 2 user text inputs called Search Location and Coordinates. I'm trying to use a checkbox when selected allows search location to be edited and the coordinates input be disabled and vice versa when the checkbox is not selected.
When i first run the code, i can edit Search Location and Coordinates is disabled. When i select the checkbox the text input works fine, Search Location is disabled and Coordinates is editable. However, when i try to unselect the checkbox, Search Location is still disabled and Coordinates can still be edited.
I have tried using useEffect but im not too familiar with this nor do i know if this is the correct approach. I am using react hook forms for user inputs and i use react native elements for checkboxes.
Code:
export default function UserInput({ navigation }) {
const { handleSubmit, control } = useForm();
const [checkbox, setCheck] = useState(false);
const [edit1, setEdit1] = useState(true);
const [edit2, setEdit2] = useState(false);
const onSelect = () => {
if (!checkbox) {
setEdit1(false);
setEdit2(true);
}
setCheck(!checkbox);
};
return (
<View style={styles.formContainer}>
<Text style={styles.text}>Distance(km)</Text>
<Controller
name="distance"
control={control}
rules={{
required: true,
}}
render={({ field: { onChange, value } }) => (
<TextInput
placeholder="Enter your Distance"
style={styles.input}
onChangeText={onChange}
value={value}
/>
)}
/>
<Text style={styles.text}>Search Location</Text>
<Controller
name="searchLocation"
control={control}
rules={{
required: true,
}}
render={({ field: { onChange, value } }) => (
<TextInput
placeholder="Enter your Coordinates"
style={styles.input}
onChangeText={onChange}
value={value}
editable={edit1}
/>
)}
/>
<CheckBox
center
title="Current Location"
checked={checkbox}
onPress={onSelect}
/>
<Text style={styles.text}>Coordinates</Text>
<Controller
name="coordinates"
control={control}
rules={{
required: true,
}}
render={({ field: { onChange, value } }) => (
<TextInput
placeholder="Enter your Coordinates"
style={styles.input}
onChangeText={onChange}
value={value}
editable={edit2}
/>
)}
/>
</View>
);
}

Answer 1

Try this one
const onSelect = () => {
if (!checkbox) {
setEdit1(false);
setEdit2(true);
} else {
setEdit1(true);
setEdit2(false);
}
setCheck(!checkbox);
};