unable to import svg in react native : None of these files exist

I am trying to import svg which I converted into jsx using transform.tools. However when I try to import it into my component it says unable to resolve module : none of these files exist.

I checked the path in the import line and it was fine.

here is the folder structure :

I want to import Letsplay.jsx in PlayButton.js

and below is how I import the jsx in my component

import React from 'react';
import {TouchableOpacity, Animated} from 'react-native';
import LetsPlay from './LetsPlay'; // <<--- here

const PlayButton = ({navigation}) => {
  return (
    <Animated.View>
      <TouchableOpacity
        onPress={() => {
          navigation.navigate('GameSelection');
        }}>
        <LetsPlay /> // <<-- here
      </TouchableOpacity>
    </Animated.View>
  );
};

export default PlayButton;

here is the jsx component code:

import * as React from 'react';
import Svg, {Circle, G, Path, Defs} from 'react-native-svg';
/* SVGR has dropped some elements not supported by react-native-svg: filter */

function LetsPlay(props) {
  return (
    <Svg
      width={114}
      height={114}
      viewBox="0 0 114 114"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}>
      <Circle
        cx={57}
        cy={57}
        r={53.5}
        fill="#F2D330"
        stroke="#FCFCFA"
        strokeWidth={7}
      />
      <G filter="url(#filter0_d_85_425)">
        <Path
          d="M77 52.67c3.333 1.924 3.333 6.736 0 8.66L50.75 76.486c-3.333 1.924-7.5-.482-7.5-4.33V41.844c0-3.85 4.167-6.255 7.5-4.33L77 52.67z"
          stroke="#FCFCFA"
          strokeWidth={2.5}
          shapeRendering="crispEdges"
        />
      </G>
      <Defs />
    </Svg>
  );
}

export default LetsPlay;

I am using:
"react-native": "0.68.2",
"react-native-svg": "^13.7.0",