Display Vector Sound waves in React native based on the audio through WebRTC - React Native

Question

I have a React Native application where I have to display vector sound waves as in below image based on the audio obtained through WebRTC.

Tried below code to send the audio track to display the sound waves.

import React, { useEffect, useState } from 'react';
import { View } from 'react-native';
import SoundWave from './SoundWave';

const App = () => {
  const [audioData, setAudioData] = useState([]); // State to store audio data

  useEffect(() => {
    // Function to handle incoming audio data from WebRTC stream
    const handleAudioData = (event) => {
      const { data } = **// Want to know how to send the audio track from webrtc to this variable**
      setAudioData(data);
    };

    // Initialize and configure your WebRTC audio stream
    const audioStream = new MediaStream();
    // ... Code to set up your WebRTC audio stream ...

    const audioContext = new AudioContext();
    const audioSource = audioContext.createMediaStreamSource(audioStream);
    const audioProcessor = audioContext.createScriptProcessor(4096, 1, 1);

    audioProcessor.onaudioprocess = handleAudioData;
    audioSource.connect(audioProcessor);
    audioProcessor.connect(audioContext.destination);

    // Cleanup function to disconnect audio nodes and clean up resources
    return () => {
      audioProcessor.disconnect();
      audioSource.disconnect();
      audioContext.close();
    };
  }, []);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <SoundWave data={audioData} width={300} height={100} />
    </View>
  );
};

export default App;

In the above code want to know how to set the webrtc audio track to setAudioData(?)

I have used the component as below.

import React from 'react';
import { View } from 'react-native';
import Svg, { Path } from 'react-native-svg';

const SoundWave = ({ data, width, height }) => {
  // Normalize the data values to fit within the height
  const normalizedData = data.map(value => value * height);

  // Calculate the width of each waveform segment
  const segmentWidth = width / (normalizedData.length - 1);

  // Generate the SVG path string based on the data
  const pathData = normalizedData
    .map((value, index) => `${index * segmentWidth},${value}`)
    .join(' ');

  return (
    <View style={{ width, height }}>
      <Svg width={width} height={height}>
        <Path
          d={`M0,${height / 2} L${pathData} L${width},${height / 2}`}
          fill="none"
          stroke="black"
        />
      </Svg>
    </View>
  );
};

export default SoundWave;

Please let me know how to get the audio track and changes (if any) for calculation to make the sound wave to work.

Thanks in Advance