Как я могу правильно сохранять и восстанавливать рисунки Excalidraw из localStorage в компоненте React? ⇐ Javascript

[Anonymous]

**Я работаю над компонентом React, использующим Excalidraw, и хочу сохранять и загружать рисунки из localStorage, чтобы пользователи не теряли свою работу после обновления страницы.
**

Код: Выделить всё

import { Excalidraw } from "@excalidraw/excalidraw";
import "@excalidraw/excalidraw/index.css";
import { useEffect, useState } from "react";
export default function DrawExcalidraw() {
const [elements, setElements] = useState([]);

// Load saved drawing
useEffect(() => {
const savedDrawing = localStorage.getItem("drawing");
if (savedDrawing) {
setElements(JSON.parse(savedDrawing));
}
}, []);

// Save drawing every time elements change
useEffect(() => {
localStorage.setItem("drawing", JSON.stringify(elements));
}, [elements]);

return (

 setElements(updatedElements)}
/>

);
}

Проблема
После перезагрузки страницы холст пуст, хотя я вижу данные рисунка, сохраненные в localStorage.
Иногда я получаю ошибку анализа JSON или на холсте ничего не появляется.
Я не уверен, следует ли мне использовать InitialData, onChange или другой API-интерфейсы Excalidraw, такие как сериализация/десериализация.
Что я пробовал
Проверил документацию Excalidraw
.
Попытался обернуть логику сохранения и загрузки внутри асинхронных функций.
Попробовал использовать onChange={(elements, appState) => ...} для захвата как элементов, так и состояния приложения.
Проверено, что localStorage.getItem("drawing") возвращает действительные данные.
Как правильно сохранять и восстанавливать рисунки Excalidraw из localStorage в компоненте React?

Подробнее здесь: https://stackoverflow.com/questions/798 ... orage-in-a