React Native Expo: Camera in ViewPager - reactjs

Question

I am creating a ViewPager with a Camera inside in a View, when the ViewPager renders the Views everything is ok but then when the ViewPager change the page and get back to the Camera Page the Camera is not appearing again. How to solve this? There is a way to render the camera asynchronously?
This is my ViewPager:
import React from 'react';
import ViewPager from '#react-native-community/viewpager';
import { View } from 'react-native';
const Pager = ({
pages,
initalPage,
onPageSelected,
onPageScrollStateChanged,
onPageScroll
}) => {
return (
<ViewPager
style={{flex: 1}}
initialPage={initalPage}
onPageSelected={(e)=>onPageSelected && onPageSelected(e.nativeEvent)}
onPageScrollStateChanged={(e)=>onPageScrollStateChanged && onPageScrollStateChanged(e.nativeEvent)}
onPageScroll={(e)=>onPageScroll && onPageScroll(e.nativeEvent)}
>
{
pages.map((page,i)=>
<View key={i} style={{flex: 1}}>
{
page
}
</View>
)
}
</ViewPager>
)
}
export default Pager;
This is my Camera Page:
import React, { useEffect, Suspense, useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { Camera } from 'expo-camera';
import { LinearGradient } from 'expo-linear-gradient';
import { color } from '../../utils';
const ScannerView = ({
isInView,
}) => {
let camera = null;
const [hasPermission, setHasPermission] = useState(null);
const [cameraRatio, setCameraRatio] = useState('1:1');
useEffect(()=>{
(async () => {
const { status } = await Camera.requestPermissionsAsync();
setHasPermission(status === 'granted');
})();
}, []);
const handleCameraReady = () => {
camera.getSupportedRatiosAsync().then((data)=>{
setCameraRatio(data[data.length-1]);
});
}
const handleBarcodeScanned = (data) => {
console.log(data);
}
const handleThis = (err) => {
console.log("EVENT",err.nativeEvent)
}
const renderCamera = (
<Camera
ref={ref=>{
camera=ref;
}}
style={styles.camera}
type={Camera.Constants.Type.back}
focusable={true}
ratio={cameraRatio}
onCameraReady={handleCameraReady}
onBarCodeScanned={handleBarcodeScanned}
onMountError={handleThis}
/>
)
return (
<View style={styles.container}>
{
(hasPermission) &&
<Suspense>
{renderCamera}
</Suspense>
}
<LinearGradient
colors={['transparent', color.neutral80]}
style={styles.gradient}
/>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'black',
alignItems: 'stretch'
},
camera: {
flex: 1,
backgroundColor: 'red',
},
gradient: {
flex: 1,
height: 220,
position: 'absolute',
bottom: 0,
left: 0,
right: 0
}
})
export default ScannerView;