Reactのプロジェクト内に保存した画像をモーダルウインドウに出力する方法を教えてください

下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。

【質問の主旨】

私はReactとOpen AI APIのCreate image edit 機能を使って、元の画像と文章をOpen AIに送って新たな画像を作成するアプリを作成しています。

現在までのコーディングでフロントエンドに作成したモーダルウインドウで元の画像を表示するところまで作成したつもりですが、その通りに表示されません。

下記の【質問の補足】で提示するコードのうち、どこを修正すれば良いでしょうか？

【質問の補足】

1. コード

App.js

import { useState } from "react"; import Modal from "./components/Modal"; const App = () => { const [selectedImage, setSelectedImage] = useState(null); const [modalOpen, setModalOpen] = useState(null); const uploadImage = async(e) => { const formData = new FormData(); formData.append('file', e.target.files[0]); setSelectedImage(e.target.files[0]); try { const options = { method: "POST", body: formData, } const response = await fetch('http://localhost:8000/upload', options); const data = await response.json(); console.log(data); } catch(error) { console.error(error); } } return ( <div className="app"> <div className="upload-image"> <span> <label htmlFor="files">Upload an image </label> <input onChange={uploadImage} id="files" accept="image/*" type="file" hidden /> to edit. </span> {modalOpen && <div className="overlay"> <Modal setModalOpen={setModalOpen} setSelectedImage={setSelectedImage} selectedImage={selectedImage} /> </div>} </div> </div> ); } export default App;

Modal.js

import { useState } from "react"; const Modal = ({ setModalOpen, setSelectedImage, selectedImage}) => { const [error, setError] = useState(null); console.log('selectedImage', selectedImage); const closeModal = () => { setModalOpen(false); setSelectedImage(null); } return( <div className="modal"> <div onClick={closeModal}>X</div> <div className="img-container"> {selectedImage && <img src={URL.createObjectURL(selectedImage)} alt="uploaded image" />} </div> </div> ); } export default Modal;

全体のコード

https://github.com/echizenyayota/react-dalle-create-image-edit-clone/tree/developer

2. すでに出来上がっている機能

デバイスから画像ファイルを取り込む機能

画像ファイルをプロジェクトフォルダ内にあるpublicフォルダに保存する機能

3. 質問解決によって実現させたい機能

publicフォルダに保存した画像をモーダルウインドウ（Modal.js）に表示させる

4. エラーの表示状況

フロントエンド

エラーは特に表示されていません。ただしconsole.log(‘selectedImage’, selectedImage) と記述しているにもかかわらず、何も表示されません

バックエンド（ターミナル画面）

エラーは特に表示されません。publicに保存した画像の情報が表示されます。

—

以上、ご確認よろしくお願い申し上げます