How to capture a specific portion of the screen when capturing an image in expo react native

Question

Have you seen apps like Math Papa, or PhotoMath, where the camera captures a particular portion in view on the screen? I want to implement the same but in my case the ScanningArea View. I have tried different methods which hasn't been really working, can anyone please help me, I'll highly appreciate it, Here's my code:

import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import React, { useEffect, useState } from 'react'
import Header from '../components/math_scanner/Header'
import { Camera, CameraType } from 'expo-camera';
import * as Permissions from 'expo-permissions';
import { Ionicons } from '@expo/vector-icons';
import SnapPictureBtn from '../components/math_scanner/SnapPictureBtn';
import { useNavigation } from '@react-navigation/native';
import { Image } from 'react-native-elements';

export default function MathScannerScreen() {
const navigation = useNavigation();
const [type, setType] = useState(CameraType.back);
const [hasPermission, setHasPermission] = useState(null);
const [camera, setCamera] = useState(null);
const [imageUri, setImageUri] = useState(null);

const askPermission = async () => {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    setHasPermission(status === 'granted');
}

useEffect(() => {
    askPermission();
}, []);

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


const takePicture = async () => {
    if (camera) {
        const options = { quality: 0.5, base64: true };
        const { uri } = await camera.takePictureAsync(options);
        console.log('original image uri:', uri);
        setImageUri(uri)
    }
};
  
return (
  <View style={styles.container}>
    {imageUri ? (
            <Image source={{ uri: imageUri }} style={{ width: 300, height: 250 }} 
         resizeMode='contain' zoom={0} />
        : (
        <Camera style={styles.camera} type={type} ref={(ref) => setCamera(ref)}>
        <View style={styles.overlay} />
        <Header />
        <View style={{width: '100%', alignItems: 'center', justifyContent: 'center', marginVertical: 30}}>
        <View style={styles.textContainer}>
            <Text style={styles.text}>Take a picture of your math problem</Text>
        </View>
        <View style={styles.scanningArea}>
            <Ionicons name='ios-add' size={30} color='#fff' />
        </View>

        </View>
        <View style={{marginTop: 30}} />
        <SnapPictureBtn onPress={takePicture} />
        <TouchableOpacity onPress={()=> navigation.goBack()} style={styles.calcBtn}>
            <Ionicons name='ios-calculator-sharp' size={30} color='#000' />
        </TouchableOpacity>
        </Camera>
    )}
</View>
 )
}

const styles = StyleSheet.create({
   container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
   },
   camera: {
    width: '100%',
    height: '100%',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fff'
   },
   overlay: {
    backgroundColor: 'rgba(0, 0, 0, 0.2)',
    width: '100%',
    height: '100%',
    position: 'absolute',
    top: 0
   },
   scanningArea: {
    width: 350,
    height: 150,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 10,
    borderWidth: 1,
    borderColor: '#fff',
   },
   textContainer: {
    paddingVertical: 20
   },
   text: {
    fontWeight: 'bold',
    color: '#fff'
   },
   calcBtn: {
    backgroundColor: '#fff',
    padding: 10,
    borderRadius: 50
   }
 })