Converting component code to hooks in react native

Question

Am having trouble converting this piece of code to react native hooks code. Am following a tutorial which has its code on RN state component, am writing mine in RN hooks, but I got stocked. I know am not doing something right in the onFaceDetected also, but I can't just figure it out to write the right hook code for this code below. Please I need help with right hook code for this piece of code below. Thank you very much in advance.

const [state, setState] = useState({
  takingPic: false,
  box: null,
  leftEyePosition: null,
  rightEyePosition: null,
})
          
const onFaceDetected = ({ faces }) => {
  if (faces[0]) {
    setState({
      box: {
        width: faces[0].bounds.size.width,
        height: faces[0].bounds.size.height,
        x: faces[0].bounds.origin.x,
        y: faces[0].bounds.origin.y,
        yawAngle: faces[0].yawAngle,
        rollAngle: faces[0].rollAngle,
      },
      rightEyePosition: faces[0].rightEyePosition,
      leftEyePosition: faces[0].leftEyePosition,
    });
  } else {
    setState({
      box: null,
      rightEyePosition: null,
      leftEyePosition: null,
    });
  }
}
          
return (
    <View style={styles.container}>
      <RNCamera
          ref={cameraRef}
          style={styles.cameraStyle}
          type={RNCamera.Constants.Type.front}
          onFacesDetected={onFaceDetected}
          flashMode={RNCamera.Constants.FlashMode.auto}
          onRecordingStart={() => setIsRecording(true)}
          onRecordingEnd={() => setIsRecording(false)}
      />
      {this.state.box && (
        <>
          <FSLTechFilter {...this.state.box} />
          <GlassesFilter
            rightEyePosition={this.state.rightEyePosition}
            leftEyePosition={this.state.leftEyePosition}
            rollAngle={this.state.box.rollAngle}
            yawAngle={this.state.box.yawAngle}
          />
        </>
      )}
      <View style={styles.snapWrapper}>
        <TouchableOpacity 
            activeOpacity={0.5}
            onPress={onRecord} 
            style={isRecording ? styles.captureBtnActive : styles.capture}>
          <Text style={styles.snapText}>Snap</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

Answer 1

heres is the hook

const useFaceDetected = () => {
  const [state, setState] = React.useState({
    takingPic: false,
    box: null,
    leftEyePosition: null,
    rightEyePosition: null,
  });

  const onFaceDetected = ({ faces }) => {
    if (faces[0]) {
      setState({
        box: {
          width: faces[0].bounds.size.width,
          height: faces[0].bounds.size.height,
          x: faces[0].bounds.origin.x,
          y: faces[0].bounds.origin.y,
          yawAngle: faces[0].yawAngle,
          rollAngle: faces[0].rollAngle,
        },
        rightEyePosition: faces[0].rightEyePosition,
        leftEyePosition: faces[0].leftEyePosition,
      });
    } else {
      setState({
        box: null,
        rightEyePosition: null,
        leftEyePosition: null,
      });
    }
  };

  return { state, setState, onFaceDetected };
};

use it like:

const {state, onFaceDetected} = useFaceDetected()