Audio not playing when a random url path is passed from REST API

Question

I have a util function defined in soundLoader.js that will play the audio. And I have a react-native component I called the util function and passed the url to play the audio. I get the url by the id from currently clicked button using rest api, and the plan is when the button is clicked I will pass the audio url path for the soundLoader function and I want it to play and also enable it to pause if another button is clicked I want the previous one to stop and play the current clicked audio or pause if the same button is clicked. Here is my code below, how I try to code the logic. After the code runs when I try to play the audio when button is clicked I get " LOG playback failed due to audio decoding errors " It is not playing the audio. How should I fix this issue and enable it to play and pause the audio?

`soundLoader.js`
        
var Sound = require('react-native-sound');
Sound.setCategory('Playback');
            
var duration =0
function mySoundLoader (url)  {
let isPlaying = false;
setIsPlaying = (val) =>{
   isPlaying = val;
   return isPlaying;
}
var audio = new Sound(url, null, (e) => {
            
if (e) {
    console.log('error loading track:', e);
    return;
} 
duration = Math.floor(audio.getDuration());
               
console.log(
   'duration in seconds: ' +
    audio.getDuration() +
    'number of channels: ' +
    audio.getNumberOfChannels(),
);
         
audio.setVolume(1);
audio.release();
            
if (audio.isPlaying()) {
    audio.pause();
    setIsPlaying(false);
} else {
    setIsPlaying(true);
            
audio.play(success => {
    if (success) {
        setIsPlaying(false);        
        console.log('successfully finished playing');
    } else {
        setIsPlaying(false);
        console.log('playback failed due to audio decoding errors');
    }
    });
}
               
})
            
            
}
            
setTimeout(() => mySoundLoader, duration)
            
            
            
            
export default mySoundLoader;
            
            
            
`player.js`
            
            
import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet, TouchableWithoutFeedback, Button } from 'react-native';
import { FlatList, Image, TouchableOpacity } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import { getMovies, addFavorite, removeFavorite, getKefleInfo, getMezmurById } from '../redux/actions';
import dings from '../../src/audio/trimmed-harp-curved.mp3';
import Ionicons from 'react-native-vector-icons/Ionicons';
            
import mySoundLoader from './SoundLoader';
            
            
export default function Kefle() {
    const { kefleInfo } = useSelector(state => state.kefleReducer);
    const dispatch = useDispatch();
    const fetchKefleInfo = () => dispatch(getKefleInfo());
    const [activeId, setActiveId] = useState();
            
    useEffect(() => {
        fetchKefleInfo();
        console.log(kefleInfo)
    }, []);
            
    actionOnRow = (item) => {
        console.log("here actionOnRow called")
        console.log('Selected Item :', item);
        setActiveId(item.mezmur_id);
    }
    return (
        <View style={{ flex: 1, marginTop: 44, paddingHorizontal: 20 }}>
        <Text style={{ fontSize: 22 }}>Music Player</Text>
        <View style={{ flex: 1, marginTop: 12 }}>
        <FlatList
            data={kefleInfo}
            keyExtractor={item => item.mezmur_id}
            renderItem={({ item }) => {
       
            const IMAGE_URL = item.kefle_photo;
            return (
                <View style={{ marginVertical: 12 }}>
                <TouchableWithoutFeedback onPress={() => actionOnRow(item)}>
                <View style={{ flexDirection: 'row', flex: 1 }}>
            
                <View style={{ flex: 1, marginLeft: 12 }}>
                <View>
                <Text style={{ fontSize: 22, paddingRight: 16, textAlign: "center" }}>
                {item.title}
                </Text>
                <Button title="play me" onPress={(e) => {
                        mySoundLoader(item.audio)
                }} />
                </View>
                <View
                style={{
                    flexDirection: 'row',
                    marginTop: 10,
                    alignItems: 'center',
                }}>
            </View>
            </View>
            </View>
            </TouchableWithoutFeedback>
            </View>
        );
    }}
    showsVerticalScrollIndicator={false}/>
    </View>
    </View>
    );
}
            
const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#000',
    },
    playBtn: {
        padding: 20,
    },
});