ReactNative Voice Library new NativeEventEmitter() ERROR

Question

I'm studying React Native. I tried to install @react-native-community/voice or @react-native-voice/voice library because I wanted to get the search term delivered by voice, but it failed. The following errors are continuously occurring.

WARN new NativeEventEmitter() was called with a non-null argument without the required addListener method. WARN new NativeEventEmitter() was called with a non-null argument without the required removeListeners method.

import React, { useEffect, useState } from 'react';
import {
StyleSheet,
Text,
View,
SafeAreaView,
Image,
TouchableHighlight,
ScrollView,
Platform
} from 'react-native';
import Voice from '@react-native-community/voice';

function App() {
  const [pitch, setPitch] = useState('');
  const [error, setError] = useState('');
  const [end, setEnd] = useState('');
  const [started, setStarted] = useState('');
  const [results, setResults] = useState([]);
  const [partialResults, setPartialResults] = useState([]);

  useEffect(() => {
    Voice.onSpeechStart = onSpeechStart;
    Voice.onSpeechEnd = onSpeechEnd;
    Voice.onSpeechError = onSpeechError;
    Voice.onSpeechResults = onSpeechResults;
    Voice.onSpeechPartialResults = onSpeechPartialResults;
    Voice.onSpeechVolumeChanged = onSpeechVolumeChanged;
    //Voice.onSpeechRecognized = onSpeechRecognized;

    return () => {
      Voice.destroy().then(Voice.removeAllListeners);
    };
  }, []);

  const onSpeechStart = (e) => {
    console.log('onSpeechStart: ', e);
    setStarted('√');
  };

  const onSpeechEnd = (e) => {
    console.log('onSpeechEnd: ', e);
    setEnd('√');
  };

  const onSpeechError = (e) => {
    console.log('onSpeechError: ', e);
    setError(JSON.stringify(e.error));
  };

  const onSpeechResults = (e) => {
    console.log('onSpeechResults: ', e);
    setResults(e.value);
  };

  const onSpeechPartialResults = (e) => {
    console.log('onSpeechPartialResults: ', e);
    setPartialResults(e.value);
  };

  const onSpeechVolumeChanged = (e) => {
    console.log('onSpeechVolumeChanged: ', e);
    setVolume(e.value);
  };

  /*const onSpeechRecognized = (e) => {
    console.log('onSpeechRecognized: ', e);
    setRecognized('√');
  };*/

  const startRecognizing = async () => {
    try {
      await Voice.start('en-US');
      console.log('called start');
      setPitch('');
      setError('');
      setStarted('')
      setResults([]);
      setPartialResults([]);
      setEnd('')
    } catch (e) {
      console.log(e);
    }
  }

  const stopRecognizing = async () => {
    try {
      await Voice.stop();
      console.log('called stop');
    } catch (error) {
      console.log(error);
    }
  }

  const cancelRecognizing = async () => {
    try {
      await Voice.cancel();
      console.log('called cancel');
    } catch (error) {
      console.log(error);
    }
  }

  const destroyRecognizer = async () => {
    try {
      await Voice.destroy();
      console.log('called destroy');
      setPitch('');
      setError('');
      setStarted('')
      setResults([]);
      setPartialResults([]);
      setEnd('')
    } catch (error) {
      console.log(error);
    }
  }

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.container}>
        <Text style={styles.titleText}>
          Speeche to Text Conversion
        </Text>
        <Text style={styles.textStyle}>
          Click on Mike
        </Text>

        <TouchableHighlight onPress={startRecognizing}>
          <Image
            style={styles.imageButton}
            source={{
              uri: 'https://cdn-icons-png.flaticon.com/512/16/16276.png'
            }}
          />
        </TouchableHighlight>
        <Text style={styles.textStyle}>
            Partial Results
        </Text>
        <ScrollView>
          {partialResults.map((result, index) => {
            return (
              <Text
                key={`partial-result-${index}`}
                style={styles.textStyle}>
                  {result}
              </Text>
            )
          })}
        </ScrollView>
        <Text style={styles.textStyle}>
          Results
        </Text>
        <ScrollView style={{marginBottom: 42}}>
          {results.map((result, index) => {
            return(
              <Text
                key={`result-${index}`}
                style={styles.textStyle}>
                  {result}
              </Text>
            )
          })}
        </ScrollView>

        <View style={styles.horizontalView}>
          <TouchableHighlight
            onPress={stopRecognizing}
            style={styles.buttonStyle}>
              <Text style={styles.buttonTextStyle}>
                Stop
              </Text>
          </TouchableHighlight>

          <TouchableHighlight
            onPress={cancelRecognizing}
            style={styles.buttonStyle}>
              <Text style={styles.buttonTextStyle}>
                Cancel
              </Text>
          </TouchableHighlight>

          <TouchableHighlight
            onPress={destroyRecognizer}
            style={styles.buttonStyle}>
              <Text style={styles.buttonTextStyle}>
                Destroy
              </Text>
          </TouchableHighlight>
        </View>

      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center',
    padding: 5,
  },
  headerContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingVertical: 10,
  },
  titleText: {
    fontSize: 22,
    textAlign: 'center',
    fontWeight: 'bold',
  },
  buttonStyle: {
    flex: 1,
    justifyContent: 'center',
    marginTop: 15,
    padding: 10,
    backgroundColor: '#000',
    marginRight: 2,
    marginLeft: 2,
  },
  buttonTextStyle: {
    color: '#fff',
    textAlign: 'center',
  },
  horizontalView: {
    flexDirection: 'row',
    position: 'absolute',
    bottom: 0,
  },
  textStyle: {
    textAlign: 'center',
    padding: 12,
  },
  imageButton: {
    width: 50,
    height: 50,
  },
  textWithSpaceStyle: {
    flex: 1,
    textAlign: 'center',
    color: '#B0171F',
  },
});

export default App;

First, I tried reinstalling react-native-reanimated. Second, I added and modified the code below in the index.ts file of the library.

import { NativeEventEmitter, NativeModules } from 'react-native';

// Assuming "VoiceModule" is the Native Module from "@react-native-voice/voice" library
const VoiceModule = NativeModules.VoiceModule;

// Create a new instance of NativeEventEmitter with VoiceModule as the argument
const eventEmitter = new NativeEventEmitter(VoiceModule);

// Now you can add event listeners using eventEmitter.addListener() method
eventEmitter.addListener('onSpeechResults', (event) => {
  // Handle the event here
});