React native svg not working on RN Version 0.71.2

Question

Im trying to add svg on RN app. for that installed npm dependencies: 1) react-native-svg 2) react-native-svg-transformer. but may be due to latest React Native version 0.71.2 it is not working.

import React from 'react';
import {View} from 'react-native';
import CustomText from '../../../../component/UI/CustomText';
import Svg, {Circle} from 'react-native-svg';

const OverallPerformance = () => {
  return (
    <View>
      <CustomText>OVerview</CustomText>
      <Svg height="50%" width="50%" viewBox="0 0 100 100">
        <Circle
          cx="50"
          cy="50"
          r="45"
          stroke="blue"
          strokeWidth="2.5"
          fill="green"
        />
      </Svg>
    </View>
  );
};

export default OverallPerformance;

This is my dependencies list

this is console:

I added configuration as per react-native-svg-transformer as well

const {getDefaultConfig} = require('metro-config');

module.exports = (async () => {
  const {
    resolver: {sourceExts, assetExts},
  } = await getDefaultConfig();
  return {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
  };
})();