I can't set transparent modal due to useIsFocused hook - react-navigation

Question

A stack navigator that lives on a bottom tab contains 2 screens. One screen implements the react-native-camera and the other a modal. I'm trying to make the modal transparent but it fails (it has a white background). That's happening because of the useIsFocused hook that mounts and unmounts my camera component. Do you have any suggestions on how I can solve the issue?
function Scanner(){
return(
<Scan.Navigator headerMode='none' mode='modal'
screenOptions={{
cardStyle: { backgroundColor: 'transparent'},
cardOverlayEnabled: true,
}}
>
<Scan.Screen name='Camera' component={Camera}/>
<Scan.Screen name='ValidationModal' component= {Validation} />
</Scan.Navigator>
)
}
Camera = ({navigation}) => {
const [flash, setFlash] = React.useState(false)
const isFocused = useIsFocused();
const flashOn = ()=> {
setFlash(prevFlash => !prevFlash)
}
barcodeRecognized = ({ barcodes }) => {
barcodes.forEach(barcode => {
const kappa = JSON.parse(barcode.data)
navigation.navigate('ValidationMdal')
})
};
if(isFocused){
return(
<RNCamera
ref={ref => {
this.camera = ref;
}}
type={RNCamera.Constants.Type.back}
captureAudio={false}
flashMode={flash?RNCamera.Constants.FlashMode.torch:RNCamera.Constants.FlashMode.off}
androidCameraPermissionOptions={{
title: 'Permission to use camera',
message: 'We need your permission to use your camera',
buttonPositive: 'Ok',
buttonNegative: 'Cancel',
}}
style={{ flex: 1,width: '100%'}}
onGoogleVisionBarcodesDetected={this.barcodeRecognized}>
<TouchableHighlight style={{position:'absolute', top:10, right:10, borderRadius:50, zIndex:100, backgroundColor:'rgba(255,255,255,0.7)'}} onPress={flashOn} >
<Image source={flash?require("../../images/_Active.png"):require("../../images/_Idle.png")} />
</TouchableHighlight>
</RNCamera>
)
}else if(!isFocused){
return null
}
}
Validation = ({navigation}) =>{
return(
<View style={styles.container}>
<Image style={{flex:1}} source={require('../../green-tick.png')} resizeMode={'contain'} />
<TouchableHighlight style={} title='Dismiss' onPress={()=>navigation.goBack()}>
<Text>OK</Text>
</TouchableHighlight>
</View>
)
}