How to visualize sound waves like Google Meet does while a person talking in react native

I am trying to accomplish very similar animation in the below example.

My approach was like this:Get the voice volume data, append it to a view's borderWidth using a sharedValue of react-native-reanimated. However, since borderWidth append itself to inside of the View, the visualization is look like in the following example:

below you can find my code,

initialization of react-native-reanimated related states.

  const voiceVolumeMeter = useSharedValue(0);  const voiceVolumeMeterStyles = useAnimatedStyle(() => {    return {      borderWidth: voiceVolumeMeter.value,    };  });

appending volume data to the voiceVolumeMeter parameter:

  voiceVolumeMeter.value = withSpring(55 + e.currentMetering!, {    stiffness: 90,    velocity: 12,    mass: 0.5,  });

applying animatedStyle to View

<Animated.View style={[styles.volumeMeterContainer, voiceVolumeMeterStyles]}><View style={styles.recorderCircle}><Text style={styles.audioRecorderTimer}>{recorderState.duration}</Text></View></Animated.View>

styles that used above code example:

  recorderCircle: {    width: 280,    height: 280,    borderRadius: 150,    borderColor: Colors.DUSTY_ORANGE,    justifyContent: 'center',    alignItems: 'center',  },  volumeMeterContainer: {    width: 290,    height: 290,    borderRadius: 140.5,    borderWidth: 10,    borderColor: Colors.WINDOWS_BLUE,    justifyContent: 'center',    padding: 20,  },  audioRecorderTimer: {    fontFamily: 'Quicksand',    fontStyle: 'normal',    fontWeight: '700',    fontSize: 45,    lineHeight: 56,    textAlign: 'center',    letterSpacing: -0.746023,    color: Colors.DUSTY_ORANGE,  },

This approach basically produced exactly reversed version of Google's visualization. I have tried with css's outline props but unfortunately, outline props are not supported on react native. so i need another approach but i could not come up with a brilliant idea here.

Any help will be appreciated,

Best regards.