How to not capture audio playback running on device when capturing new video - react-native

Question

I am creating an app in expo/react-native where I am layering many videos captured by the user using expo-av, something like an acapella effect. Now if the user doesn't use headphones and tries to layer a new video listening to their previous recording(s), the sound of their previous recordings (playing on the phone speakers) comes as a disturbance on the new recording.
It seems to be possible to avoid this as we see when using Skype or Zoom one cannot hear feedback of their own voices on the sound coming in from the remote user.
It is possible using expo-av or any react native library, to cancel out speaker sound?
Sharing some code in case useful
import React, { useState, useEffect, useRef } from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import { Camera } from 'expo-camera';
import {Video} from 'expo-av';
import { Ionicons } from '#expo/vector-icons';
export default function App() {
const [hasPermission, setHasPermission] = useState(null);
const [cameraRef, setCameraRef] = useState(null);
const [videoRef,setVideoRef] = useState(null);
const [type, setType] = useState(Camera.Constants.Type.back);
const [recording, setRecording] = useState(false);
const [videoSource, setVideoSource]= useState('http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4')
useEffect(() => {
(async () => {
const { status } = await Camera.requestPermissionsAsync();
setHasPermission(status === 'granted');
})();
}, []);
const fireOnLoad=()=>{
}
if (hasPermission === null) {
return <View />;
}
if (hasPermission === false) {
return <Text>No access to camera</Text>;
}
return (
<View style={{ flex: 1 }}>
<Camera style={{ flex: 1 }} type={type} ref={ref => {
setCameraRef(ref) ;
}}>
<View
style={{
flex: 1,
backgroundColor: 'transparent',
justifyContent: 'flex-end'
}}>
<View style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-evenly'
}}>
<TouchableOpacity
style={{
flex: 0.1,
alignSelf: 'flex-end'
}}
onPress={() => {
setType(
type === Camera.Constants.Type.back
? Camera.Constants.Type.front
: Camera.Constants.Type.back
);
}}>
<Ionicons name={ Platform.OS === 'ios' ? "ios-reverse-camera" : 'md-reverse-camera'} size={40} color="white" />
</TouchableOpacity>
<TouchableOpacity style={{alignSelf: 'center'}} onPress={async() => {
if(cameraRef){
let photo = await cameraRef.takePictureAsync();
console.log('photo', photo);
}
}}>
<View style={{
borderWidth: 2,
borderRadius:60,
borderColor: 'white',
height: 50,
width:50,
display: 'flex',
justifyContent: 'center',
alignItems: 'center'}}
>
<View style={{
borderWidth: 2,
borderRadius:60,
borderColor: 'white',
height: 40,
width:40,
backgroundColor: 'white'}} >
</View>
</View>
</TouchableOpacity>
<TouchableOpacity style={{alignSelf: 'center'}} onPress={async() => {
if(!recording){
setRecording(true)
let video = await cameraRef.recordAsync();
//console.log('video', video);
setVideoSource(video.uri);
} else {
setRecording(false)
cameraRef.stopRecording()
}
}}>
<View style={{
borderWidth: 2,
borderRadius:60,
borderColor: 'red',
height: 50,
width:50,
display: 'flex',
justifyContent: 'center',
alignItems: 'center'}}
>
<View style={{
borderWidth: 2,
borderRadius:60,
borderColor: 'red',
height: 40,
width:40,
backgroundColor: 'red'}} >
</View>
</View>
</TouchableOpacity>
</View>
</View>
</Camera>
<Video
source={{ uri: videoSource }}
style={{ flex: 1 }}
useNativeControls='true'
resizeMode={Video.RESIZE_MODE_COVER}
onLoad={fireOnLoad}
onError={fireOnLoad}
isMuted={false}
/>
</View>
);
}