I'm working on custom packages we use internally in our organization and I'm trying to reduce how many properties I need to pass into the Component I'm creating for the package. One of the components I'm building involve firebase/storage. I want to only pass the result of getStorage() from my app and let the package import ref, uploadBytes, etc. I don't want to have to import them individually and pass them as props. However, whenever I try to import ref in the package and call ref(storage), it returns the FirebaseStorageImpl again, not the StorageReference I expect.

Some code from the compiled package:

import React, { useState, useEffect } from 'react';
import { ref, uploadBytes, deleteObject } from 'firebase/storage';
export const Files = (props) => {
  const {
    storage
  } = props;
  console.log(
    storage,
    ref(storage)
  );
}

And my application file:

import { React } from 'react';
import { Files } from 'my-package';
import { initializeApp } from 'firebase/app';
import { getStorage } from 'firebase/storage';

const App = () => {
    const firebaseApp = initializeApp(/* FIREBASE CONFIG */);
    const storage = getStorage(firebaseApp);
    return (<Files
        storage={storage}
    />)
}