Could not load image elements properly after storing in LocalStorage

[toby12352]

I'm trying to utilized excalidraw with our backend but I'm testing it out first with localStorage to see how it'll look like.
So far, saving and loading to localStorage works well apart from image elements. I followed the instruction on how to save files but when I reload them, I can see the image placeholder but the content is not loaded.
I'm not sure what I'm doing wrong.

// ExcalidrawComponent.js
import React, { useState, useCallback, useRef } from "react";
import { Excalidraw, getSceneVersion } from "@excalidraw/excalidraw";
import debounce from "lodash/debounce";

const DrawBoard = () => {
  const [elements, setElements] = useState([]);
  const [files, setFiles] = useState([]);
  const [excalidrawAPI, setExcalidrawAPI] = useState(null);
  const sceneVersionRef = useRef(0);

  const saveDrawing = () => {
    const referencedFiles = {};
    elements.forEach((element) => {
      if (element.type === "image" && element.fileId && files[element.fileId]) {
        referencedFiles[element.fileId] = files[element.fileId];
      }
    });
    const data = { elements, files: referencedFiles };
    localStorage.setItem("excalidraw", JSON.stringify(data));
    console.log("Saved drawing data:", JSON.stringify(data));
  };

  const loadDrawing = () => {
    const savedData = localStorage.getItem("excalidraw");
    if (savedData) {
      const data = JSON.parse(savedData);
      console.log("Loaded drawing data:", data);
      excalidrawAPI.updateScene(data);
      setElements(data.elements);
      setFiles(data.files);
    } else {
      console.log("No saved drawing data found");
    }
  };

  const handleSceneChange = useCallback(
    debounce((elements) => {
      if (excalidrawAPI) {
        const newSceneVersion = getSceneVersion(elements);
        if (newSceneVersion !== sceneVersionRef.current) {
          sceneVersionRef.current = newSceneVersion;
          const elements = excalidrawAPI.getSceneElements();
          const files = excalidrawAPI.getFiles();
          setElements(elements);
          setFiles(files);
        }
      }
    }, 300),
    [excalidrawAPI],
  );

  return (
    <div style={{ height: "90vh" }}>
      <Excalidraw
        excalidrawAPI={(api) => setExcalidrawAPI(api)}
        initialData={{ elements, files }}
        onChange={handleSceneChange}
      />
      <button onClick={saveDrawing}>Save Drawing</button>
      <button onClick={loadDrawing}>Load Drawing</button>
    </div>
  );
};

export default DrawBoard;

This is what I see after it loads.