Disappearing after pressing in 'react-native-svg'

I use SvgCss from react-native-svg for displaying and changing the color of several external svgs.

I put onPress on it and it works as expected in most cases. but I noticed that some svgs have weird behavior after pressing on them. for example the below svg disappears after pressing!

what's the problem here?

<svg xmlns="http://www.w3.org/2000/svg" width="188" height="195" viewBox="0 0 188 195">
    <defs>
        <clipPath id="sjkzt87o0a">
            <path fill="none" stroke="#707070" d="M0 0H188V195H0z" transform="translate(277 228)"/>
        </clipPath>
    </defs>
    <g clip-path="url(#sjkzt87o0a)" transform="translate(-277 -228)">
        <g>
            <path fill="currentColor" d="M424.413 141.66A183.073 183.073 0 0 0 241.34 324.733h139.35a43.723 43.723 0 0 1 87.445 0h139.35A183.073 183.073 0 0 0 424.413 141.66z" transform="rotate(14 -112.125 652.114) rotate(-14 269.633 431.384)"/>
            <path d="M-419.71-981.787a184.43 184.43 0 0 1-5.317-36.7 182.149 182.149 0 0 1 2.037-35.924 183.1 183.1 0 0 1 8.855-34.257 184.4 184.4 0 0 1 15.136-31.7 184.393 184.393 0 0 1 20.881-28.245 183.1 183.1 0 0 1 26.09-23.9 182.158 182.158 0 0 1 30.763-18.664 184.426 184.426 0 0 1 34.9-12.535 183.84 183.84 0 0 1 44.431-5.482 182.2 182.2 0 0 1 36.685 3.741 183.411 183.411 0 0 1 34.685 10.834 184.485 184.485 0 0 1 31.712 17.342 184.062 184.062 0 0 1 27.767 23.265 182.161 182.161 0 0 0-127.848-52.183 183.849 183.849 0 0 0-44.432 5.482c-96.058 23.95-156.256 121.918-134.191 218.387l-2.153.537zm220.059-54.867a43.8 43.8 0 0 0-10-18.771 43.609 43.609 0 0 1 7.076 8.251 43.559 43.559 0 0 1 4.9 10.028l-1.974.492z" transform="rotate(14 -112.125 652.114) translate(636.09 1316.532)" style="mix-blend-mode:multiply;isolation:isolate" fill="#bfbfbf"/>
        </g>
    </g>
</svg>

I also tried SvgXml , SvgUri, SvgCssUri, no changes.

here is the code:

import React, { useEffect, useState } from 'react';
import Axios from 'axios';
import { Text } from 'native-base';
import { SvgCss } from 'react-native-svg';

const PaintObject = ({ svg, objData }) => {
  const [color, setcolor] = useState(objData.initial_color);
  const [svgfile, setsvgfile] = useState('');

  useEffect(() => {
    Axios.get(svg).then(({ data }) => {
      setsvgfile(data);
    });
  }, []);

  if (svgfile !== '') {
    return (
      <SvgCss
        width={`${objData.width}%`}
        height={`${objData.width}%`}
        style={{
          color,
          position: 'absolute',
          top: `${objData.y}%`,
          left: `${objData.x}%`,
        }}
        xml={[...svgfile].join('')}
        onPress={()=> setcolor('green')}
      />
    );
  }
  return (<Text>{ }</Text>);
};

export default PaintObject;