React Native Expo: Barcodescanner camera doesn't rotate when i press the rotate button

Question

I'm using React Native Expo. Currently i'm trying to make an application which uses a barcodescanner for scanning QR-code objects. I've implemented a turn camera button for the front or back camera but when i press the button it does nothing only when i switch from one screen to the other. I think there is something wrong with refreshing the screen immediately but i've no clue of how i should solve this problem

Code:

import React, { useEffect, useState, useLayoutEffect } from 'react';
import { StyleSheet, Text, View, Button, Alert, ActivityIndicator, Pressable } from 'react-native';
import { globalStyles } from '../styles/global';
// import { Camera, BarCodeScanningResult } from 'expo-camera';
import { BarCodeScanner } from 'expo-barcode-scanner';
import BarcodeMask from 'react-native-barcode-mask';
import { useIsFocused, useNavigation } from '@react-navigation/native';
import CustomButton from '../components/CustomButton';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';

export function ShowLoading(){
    return(
        <View style={styles.loader}><ActivityIndicator size="large" color='white'/></View>
    )
}

export default function Scan(){

    const navigation = useNavigation()
    const [hasPermission, setHasPermission] = useState(null);
    const [scanned, setScanned] = useState(false);
    const [loading, setLoading] = useState(false);
    const [type, setType] = useState(BarCodeScanner.Constants.Type.back);
    const isFocused = useIsFocused()


    useEffect(() => {
        (async () => {
            const {status} = await BarCodeScanner.requestPermissionsAsync();
            setHasPermission(status === 'granted');
        })();
    }, []);

    // useEffect(() => {
    //     if(loading){
    //         setLoading(true)
    //     } else {
    //         setLoading(false)
    //     }
    // },[loading])

    const initScanner = async() => {
        const {status} = await BarCodeScanner.requestPermissionsAsync();
        setHasPermission(status === 'granted');
    }

    const handleNavigation = async() => {
        setScanned(false)
        navigation.navigate('Oefening')
    }

    const handleNo = () => {
        setScanned(false)
    }

    const handleBarCodeScanned = ({ type, data }) => {
        setScanned(true)
        setLoading(true)
            setTimeout(() => { Alert.alert(
                'QR-Code gevonden',
                `QR-Code met type ${type} en data ${data} is gescand, wilt u verder gaan?`,
                [
                    {
                        text: "Nee",
                        onPress: () => handleNo(),
                    },
                    {
                        text: "Ja",
                        onPress: () => handleNavigation(),
                    }
                ]
            ), setLoading(false)}, 1000)
    }

    if (hasPermission === null) {
        return <View style={styles.permissionWrapper}>
                    <Text style={styles.permissionText}>Een moment geduld..</Text>
                    <ActivityIndicator size='large' color='#1f69b1'></ActivityIndicator>
                </View>;
    }

    if (hasPermission === false) {
        return <Text>Geen toegang tot uw camera!</Text>;
    }

    return (
        <View style={{flex: 1, flexDirection: 'column', justifyContent: 'flex-end'}}>
            {loading? (<View style={styles.loader}><ActivityIndicator size='large' color='#1f69b1'></ActivityIndicator></View>
            ) : (
            isFocused &&
            
            <BarCodeScanner
                onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
                style={StyleSheet.absoluteFillObject}
                type={type}
            >   
                <View style={styles.topOptions}>
      
                    <View style={styles.cameraRotateWrapper}>
                        <Pressable style={styles.cameraRotate}
                            onPress={() => {
                                setType(
                                  type === BarCodeScanner.Constants.Type.back
                                    ? BarCodeScanner.Constants.Type.front
                                    : BarCodeScanner.Constants.Type.back
                                );
                              }}
                        >
                            <Icon name='rotate-3d-variant' size={40} color={'white'}></Icon>
                        </Pressable>
                    </View>
                </View>
                <BarcodeMask edgeColor={'#62B1F6'} showAnimatedLine={true}/>                              
            </BarCodeScanner>)}
            {scanned? <View style={styles.searchTextWrapper}><Text style={styles.searchText}>Gevonden!</Text></View> : <View style={styles.searchTextWrapper}><Text style={styles.searchText}>Zoeken naar QR-Code.... </Text></View>}
            {/* {scanned? <Button title={'Opnieuw scannen'} onPress={() => setScanned(false)} /> : null} */}
            <View style={styles.bottomOptions}>
                <CustomButton textValue="Herladen" onPress={initScanner}></CustomButton>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    loader: {
        justifyContent: "center",
        alignItems: 'center',
    },
    permissionWrapper: {
        justifyContent: 'center',
        alignItems:'center',
        margin: 15,
    },
    permissionText: {
        fontSize: 16,
        fontWeight: 'bold',
    },
    topOptions: {
        marginTop: 20,
        justifyContent: 'space-between',
        marginHorizontal: '10%'
    },
    searchTextWrapper: {
        
    },
    searchText: {
        color: 'white',
        fontSize: 18,
        textAlign: 'center',
    },
    cameraRotateWrapper: {
        width: 50,
        height: 50,
    },
    cameraRotate: {
        justifyContent: 'center',
        alignItems: 'center',
        borderWidth: 1,
        borderColor: "white",
        backgroundColor: '#1f69b1',
        borderRadius: 10,
    }, 
    bottomOptions: {
        marginHorizontal: '10%',
        marginBottom: 10,
    },
})