(react-native-fs) readDir() doesn't read all the files in a folder

Question

I'm creating a music player with React Native and I was testing with a small project the package "react-native-fs", so what I did was create a folder in the Downloads folder to see if it will appear in the output, and it did, but when I added other files such as PDF and MP3, they don't appear in the list given by the function readDir(). Here's my code:

import { SafeAreaView, ScrollView, StyleSheet, Text, View } from 'react-native';
import RNFS from 'react-native-fs';

function App(): React.JSX.Element {
  const [files, setFiles] = useState<RNFS.ReadDirItem[]>();
  const [downloadsFolder, setDownloadsFolder] = useState<string>();

  const getDirectoryContent = async (path: string) => {
    try {
      const response = await RNFS.readDir(path);

      // Filter out only the music files (e.g., .mp3, .wav, .aac, etc.)
      const musicFiles = response.filter(item => {
        const fileExtension = item.name.split('.').pop()?.toLowerCase();
        return fileExtension === 'mp3' || fileExtension === 'wav' || fileExtension === 'aac';
      });

      setFiles(musicFiles);
    } catch (error) {
      console.error('Error reading directory:', error);
    }
  };

  const renderFile = (item: RNFS.ReadDirItem, key: React.Key) => {
    return (
      <View
        key={key}
        style={{
          flexDirection: 'row',
          marginVertical: 5,
          marginHorizontal: 10,
        }}>
        <Text style={{ marginRight: 10 }}>Name: {item.name}</Text>
        <Text style={{ marginRight: 10 }}>
          File: {item.isFile() ? 'true' : 'false'}
        </Text>
        <Text style={{ marginRight: 10 }}>
          Folder: {item.isDirectory() ? 'true' : 'false'}
        </Text>
      </View>
    );
  };

  useEffect(() => {
    setDownloadsFolder(RNFS.DownloadDirectoryPath);
  }, []);

  useEffect(() => {
    if (downloadsFolder) {
      getDirectoryContent(downloadsFolder);
    }
  }, [downloadsFolder]);

  return (
    <SafeAreaView>
      <View
        style={{
          top: 0,
          paddingTop: 10,
          paddingHorizontal: 15,
          paddingBottom: 20,
          borderColor: 'black',
          borderWidth: 1,
          borderRadius: 5,
        }}>
        <Text style={{ fontSize: 18, fontWeight: '500' }}>
          Directory: {downloadsFolder}
        </Text>
      </View>
      <ScrollView
        contentContainerStyle={{
          marginTop: 20,
        }}>
        {files && files.map((item, index) => renderFile(item, index))}
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  backgroundStyle: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
});

export default App;

What do you guys think is the issue here? Why only the folders appear or the files that I create with the .write() function(I only created .txt files)?

Thanks for your help :)