How to clean up nested callbacks using context react native

I have error handling in BasicInfo screen which is determined by child components which set the state with a useCallback function. Depending on the number of child components I have im having to do a callback for each. I have seen an alternative to this being useReducer and useContext but I cannot figure out how to use this. Here is my code:

function BasicInfo() {const {shell, ageAndGender, body} = styles;const [firstname, setFirstname] = useState('');const [firstnameError, setFirstnameError] = useState(true);const [ageError, setAgeError] = useState(true);const [genderError, setGenderError] = useState(true);const [sexualOrientationError, setSexualOrientationError] = useState(true);const [heightError, setHeightError] = useState(true);const setUserAgeError = useCallback(val => {    setAgeError(val);}, [setAgeError]);const setUserGenderError = useCallback(val => {    setGenderError(val);}, [setGenderError]);const setUserSexualOrientationError = useCallback(val => {    setSexualOrientationError(val);}, [setSexualOrientationError]);const setUserHeightError = useCallback(val => {    setHeightError(val);}, [setHeightError]);const handleError = () => {    return firstnameError || ageError || sexualOrientationError || genderError || heightError;}useEffect(() => {    if (firstname === '') {        setFirstnameError(true);    } else setFirstnameError(false);}, [firstname])return (<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}><View style={shell}><View style={{flex: 10}}><SignUpHeader title={`Enter a bit about\nyourself`} page={1}/><View style={body}><TextInput                        autoComplete                        mode="outlined"                        label="Firstname"                        value={firstname}                        onChangeText={firstname => setFirstname(firstname)}                        style={{maxHeight: 64, marginBottom: 32}}                        activeOutlineColor={"#000"}                        outlineColor={"#DBDBDB"}                        theme={{                            colors: {                                text: "#000",                                placeholder: "#878787",                                background: "#FFF"                            }                        }}                    /><View style={ageAndGender}><AgeButton setBasicInfoError={setUserAgeError}/><GenderButton setBasicInfoError={setUserGenderError}/></View><SexualOrientationButton setBasicInfoError={setUserSexualOrientationError}/><HeightButton setBasicInfoError={setUserHeightError}/></View></View><SignUpFooter                buttonTitle="Next"                disabled={handleError()}                route="BasicInfo"                title={`Basic\nInfo`}            /></View></TouchableWithoutFeedback>    );}

Although this code works I have similar problems in other areas of my app and so if there is a way to tidy up this code with useReducer that would be great! Thanks :)