How can I upload image to firebase storage without 2 ref imports colliding?

Question

I am working on to upload image to firebase storage and so far I can get the image and it's uri.

recipebook&modulesOnly=false&runModule=true:85384:28
 LOG  image resizing error =>  Unable to load source image from path
 LOG  Response =  {"assets": [{"fileName": "rn_image_picker_lib_temp_02a23c18-78dc-437c-8fc5-ee06452d58f6.jpg", "fileSize": 2448698, "height": 2400, "type": "image/jpeg", "uri": "file:///data/user/0/com.familyrecipebook/cache/rn_image_picker_lib_temp_02a23c18-78dc-437c-8fc5-ee06452d58f6.jpg", "width": 1080}]}
 LOG  image:  file:///data/user/0/com.familyrecipebook/cache/rn_image_picker_lib_temp_02a23c18-78dc-437c-8fc5-ee06452d58f6.jpg
 LOG  imageURI:  recipeagqzlhe5HlWiCJvpcuzWSRFdGe23
 LOG  uploadURI:  file:///data/user/0/com.familyrecipebook/cache/84c9e666-2b86-4841-bbaf-afbb632fc394.PNG

The issue starts when I have already following import

import { push, ref, serverTimestamp } from 'firebase/database'

And then adding following import

import { uploadBytes, ref } from 'firebase/storage'

This my current set up to get the image uri.

const options = {
    title: 'Select Image',
    storageOptions: {
      skipBackup: true,
      path: 'images',
    },
  }

  const selectImage = () => {
    launchImageLibrary(options, (response) => {
      console.log('Response = ', response)

      if (response.didCancel) {
        console.log('User cancelled image picker')
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error)
      } else {
        const uri = response.assets.map((image) => image.uri)
        setSelectedImage(uri.toString())
      }
    })
  }
  
  useEffect(() => {
    ImageResizer.createResizedImage(
      imageUri,
      newWidth,
      newHeight,
      compressFormat,
      quality,
      rotation,
      outputPath
    )
      .then((response) => {
        // response.uri is the URI of the new image that can now be displayed, uploaded...
        //resized image uri
        let uri = response.uri
        //generating image name
        let imageName = 'recipe' + userId
        //to resolve file path issue on different platforms
        let uploadUri = Platform.OS === 'ios' ? uri.replace('file://', '') : uri
        //setting the image name and image uri in the state
        setImageURI(imageName)
        setUploadURI(uploadUri)
      })
      .catch((err) => {
        console.log('image resizing error => ', err)
      })
  }, [userId, imageUri, newWidth, newHeight, compressFormat, quality, rotation, outputPath])

And this is the part that is causing the issue for me. How to form the upload storage function so it doesnt conlifct with the database ref when adding that uploaded image ref to the database afterwards.

  const uploadToStorage = () => {
      
      // storage()
      // .ref(imageURI)
      // .putFile(uploadURI)
      // .then((snapshot) => {
      //   //You can check the image is now uploaded in the storage bucket
      //   console.log(`${imageURI} has been successfully uploaded.`)
      // })
      // .catch((e) => console.log('uploading image error => ', e))
  }