get data from storage

import React from 'react';
import storage from './firebase';
import { getDownloadURL, ref } from 'firebase/storage';


const ImageUploader = () => {
  const DisplayImage = () => {
      // 参照を作成
      const storageRef = ref(storage, 'image/@_ONEDOO_comp.jpg');
  
      // 画像を表示
      getDownloadURL(storageRef).then( (url) => {
        document.querySelector('img').src = url;
      });
  };
  
  return (
    <div>
      <button onClick={DisplayImage} >画像を表示</button>
    </div>
  );
};

export default DisplayImage;

import ImageUploader from './ImageUploder';
function App(){
  return (
    <div><ImageUploader /></div>
  );
}
export default App;

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getStorage } from 'firebase/storage'; <--追加
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "AIzaSyBZlJUorjAJb2QYXkAh_cylYImaLkgbxsk",
  authDomain: "reactpj3.firebaseapp.com",
  projectId: "reactpj3",
  storageBucket: "reactpj3.appspot.com",
  messagingSenderId: "231702070393",
  appId: "1:231702070393:web:d48c75d82511efee91c0a8"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const storage = getStorage(app); <--追加

export default storage;　<--追加