I would like to show an image which was downloaded from firebase storage ons screen.

export const getMyImage = async (userId) => {
  try {
    if (!userId) {
      throw new Error("Invalid userId");
    }

    // ストレージの参照を取得
    const userDocRef = ref(storage, `${userId}/image`);

    // 画像のダウンロードURLを取得
    const downloadURL = await getDownloadURL(userDocRef);
    console.log("TEST", downloadURL);
    // This can be downloaded directly:
    const xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = (event) => {
      const blob = xhr.response;
    };
    xhr.open('GET', downloadURL);
    xhr.send()

    // URLを返す
    return downloadURL;

  } catch (error) {
    console.error("getMyImage: ", error);
    throw error;
  }
};

so far,I can get url like below

so all i want to do is to show the image on screen

const Main = () => {
  const [otherRiders, setOtherRiders] = useState([]);

  const dbref = ref(database); //取得したいデータのパスを指定
  const [routeInfo, setRouteInfo] = useState({ origin: "", destination: "" });
  const navigation = useNavigation(); // useNavigationフックを使用してnavigationオブジェクトを取得
  const route = useRoute();
  const user_id = route.params?.user_id;
  const [myCurrentLocation, setMyCurrentLocation] = useState({
    latitude: 0,
    longitude: 0,
  });
  const [myDestination, setMyDestination] = useState({
    latitude: 0,
    longitude: 0,
  });
  const [myOrigin, setMyOrigin] = useState({
    latitude: 0,
    longitude: 0,
  });
  // DB を取得している

  const [isMapReady, setIsMapReady] = useState(false);
  const [isEnabled, setIsEnabled] = useState(false);
  let [iconImage, setImageUri] = useState(null);
  const toggleSwitch = () => setIsEnabled((previousState) => !previousState);
//   iconImage = require('../../assets/kurumi.jpg');

  const myDestinationIcon = require("../../assets/flag.png");
  const myOriginIcon = require("../../assets/start.png");

  // requestLocationPermission();
  useEffect(() => {
    requestLocationPermission(
      setMyCurrentLocation,
      user_id,
      myCurrentLocation,
      setIsMapReady,
      
    );
    const fetchData = async () => {
      try {
        const fetchMyUserData = await getMyUserData(user_id);
        console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",fetchMyUserData)
        const fetchMyImage = await getMyImage(user_id);
        console.log("fetchMyImage",fetchMyImage)       
        setImageUri(fetchMyImage);
      } catch (error) {
        console.error("Error fetching image: ", error);
      }
    };
    fetchData();
    const childAddedListener = onChildAdded(dbref, function (snapshot) {
      let data = snapshot.val();
      setOtherRiders(data);
    });

    return () => {
      // コンポーネントがアンマウントされたときにイベントリスナーを解除する
      childAddedListener();
    };
  }, []);

  return isMapReady ? ( // マップが準備完了したら表示
    <ScrollView style={styles.Wrapper}>
      <View style={styles.mapContainer}>
        <MapView
          style={styles.map}
          initialRegion={{
            latitude: myCurrentLocation.latitude,
            longitude: myCurrentLocation.longitude,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
        >
            <Marker
                coordinate={{
                    latitude: myCurrentLocation.latitude,
                    longitude: myCurrentLocation.longitude,
                }}
            >
            <Image style={styles.icon} source={iconImage} />
          </Marker>
          
          {Array.isArray(otherRiders) && otherRiders.length > 0
            ? otherRiders.map((rider, index) => {
                console.log("rider", rider);
                let diferLat =
                  Math.abs(myCurrentLocation.latitude - rider.latitude) < 1;
                let diferLot =
                  Math.abs(myCurrentLocation.longitude - rider.longitude) < 1;
                // if(diferLat && diferLot){
                //     Alert.alert("手を振りましょう")
                // }
                return (
                  <Marker
                    key={index} // ここで一意のキーを提供する
                    coordinate={{
                      latitude: rider.latitude,
                      longitude: rider.longitude,
                    }}
                  >
                    <Image style={styles.icon} source={iconImage} />
                  </Marker>
                );
              })
            : null}
        </MapView>
      </View>

      <View>
        <Button
          title="ルートを検索する"
          onPress={() => fetchRoute(setMyOrigin, setMyDestination, routeInfo)}
        />
      </View>
      <View>
        <Button title="戻る" onPress={() => navigation.navigate("Top")} />
      </View>
    </ScrollView>
  ) : (
    <View style={styles.waitContainer}>
      <ActivityIndicator size="large" color="#0000ff" />
      <Text style={styles.waitText}>少々お待ちください...</Text>
    </View>
  );
};

i home to insert the image i downloaded into iconImage.

            <Marker
                coordinate={{
                    latitude: myCurrentLocation.latitude,
                    longitude: myCurrentLocation.longitude,
                }}
            >
            <Image style={styles.icon} source={iconImage} />
          </Marker>

Could you please provide some information how does it work?
Thank you for reading here and hope to give me your hands.