I have an image that is passed inside a div and that works like a button that opens and closes a component. I'm facing a bug where the image (arrow) doesn't load in Android apps. It works 100% for the Web. I need the image to be loaded in the Android Aplication and on the Web. faulty (Android App)

flawless (web)

Jsx:

const [arrow, setArrow] = useState(isCollapsed);
  const [arrowStyle, setArrowStyle] = useState();

  const handleArrowClick = () => {
    openHistoryTable();
    setArrow(!isCollapsed);
  };


useEffect(() => {
      arrow ? setArrowStyle('expanded') : setArrowStyle('arrow');
    }, [arrow]);



<div
       onClick={() => handleArrowClick()}
       className={`${styles['arrow']} ${ styles[arrowStyle] }`}
  />

CSS:

arrow {
        position: absolute;
        width: 12px;
        height: 20px;
        background-image: url(../icons/gray-arrow.svg);
        background-size: contain;
        background-repeat: no-repeat;
        transform: rotate(90deg);
        top: 27px;
        right: 40px;
        transition: all 0.2s ease;

        @include media-below($mobile-max) {
          right: 25px;
        }

        &:hover {
          cursor: pointer;
        }

        &.expanded {
          transform: rotateZ(270deg);
        }
      }