react native react-native-svg-transformer get error react is not defined

i install react-native-svg-transformer i changed metro.config.js file to like in guide

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'],
    },
  };
})();

when I add code like this

import Firefox from '../../images/general/firefox.svg';

I get the error but if i remove the line the app run but i cant to show the svg file screenshot of error

all file code

import React from 'react';
import {GlobalStyles, globalStyles} from '../../styles/GlobalStyles';
import Container from '../Container/Container';
import DarimpoImage from '../DarimpoImage/DarimpoImage';
import {styles} from './Styles';
import DarimpoText from '../DarimpoText/DarimpoText';
import localImages from '../../images/source';
import DarimpoSafeAreaView from '../DarimpoSafeAreaView/DarimpoSafeAreaView.native';
import HideableComponent, {HideTypeEnum} from '../HideableComponent/HideableComponent';
//import Logo from '../../images/general/firefox.svg';
import Firefox from '../../images/general/firefox.svg';

export default function Header(props) {
  let {user, style, backgroundColor = '#FFFFFF'} = props;
  return (
    <DarimpoSafeAreaView style={style}>
      <Container style={{...globalStyles.row, ...innerStyles.container, backgroundColor: backgroundColor}}>
        {renderUserComponenet(user)}
        <DarimpoImage source={localImages.general.logo} style={innerStyles.menuImage} />
        {/* <Logo width={120} height={40} /> */}
      </Container>
    </DarimpoSafeAreaView>
  );
}
function renderUserComponenet(user = {}) {
  if (!user) {
    return;
  }
  let {imageProfile, fullName} = user;
  return (
    <Container style={{...globalStyles.row}}>
      <DarimpoImage
        source={localImages.general.headerMenu}
        style={{...globalStyles.alignSelf, ...globalStyles.marginSide14, ...innerStyles.menuImage}}
      />
      <HideableComponent hideType={imageProfile ? HideTypeEnum.VISIBLE : HideTypeEnum.GONE}>
        <DarimpoImage source={imageProfile} style={{...innerStyles.menuImage}} />
      </HideableComponent>
      <DarimpoText style={styles.userName}>{fullName}</DarimpoText>
    </Container>
  );
}
const innerStyles = {
  menuImage: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  userName: {
    alignSelf: 'center',
  },
  container: {
    paddingLeft: 14,
    paddingRight: 14,
    paddingBottom: 4,
    paddingTop: 4,
    justifyContent: 'center',
    alignItems: 'center',
    borderBottomColor: GlobalStyles.get007efe(),
    borderBottomWidth: 3,
  },
};

the firfox icon not in render method and i get the error

my libs: "react-native-svg": "12.2.0", "react-native-svg-transformer": "0.14.3", "react": "17.0.0", "react-native": "0.63.4",

help me please

thank you