“QUOTA_BYTES quota exceeded” error in React app using IndexedDB

I have a React app that uses IndexedDB to store some user-entered values before sending it off to the backend. I am repeatedly getting Uncaught (in promise) Error: QUOTA_BYTES quota exceeded every time I update an input, even without actually submitting any of the data to IndexedDB.

I’ve cleared the storage so that I’m using 0B out of 373800 MB storage quota and yet the errors persist.

Here is the code I have that I believe would be relevant to the issue:

export default function Personalize() {
    const [formData, setFormData] = useState({});
    
    // Initial data fetch and formData setup
    useEffect(() => {
        fetch(`${host}/api/products/${productId}`)
          .then(response => response.json())
          .then(data => {
            const initialFormData = data.personalizations.reduce((acc, variable) => {
              acc[variable.name] = variable.type === 'list' ? [] : '';
              return acc;
            }, {});
            
            data.preview.forEach(variable => {
              if (variable.key) {
                initialFormData[variable.key] = variable.default;
              }
            });
            setFormData(initialFormData);
          });
    }, [productId]);

    // This triggers the error on every change
    const handleChange = (name, value) => {
        setFormData((prevData) => ({
          ...prevData,
          [name]: value,
        }));
    };

    // IndexedDB setup - only used on form submit
    const openDB = () => {
        return new Promise((resolve, reject) => {
            const request = indexedDB.open("PreviewAppDB", 1);
            request.onupgradeneeded = (event) => {
                const db = event.target.result;
                if (!db.objectStoreNames.contains("choices")) {
                    db.createObjectStore("choices", {keyPath: "key"});
                }
            };
            request.onsuccess = (event) => resolve(event.target.result);
            request.onerror = (event) => reject("Failed to open IndexedDB");
        });
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        const db = await openDB();
        return new Promise((resolve, reject) => {
            const transaction = db.transaction("choices", "readwrite");
            const store = transaction.objectStore("choices");
            const request = store.put({ key: "choices", value: formData });
            request.onsuccess = () => {
                resolve(true);
                window.location.href = `/products/${productId}/preview`;
            };
            request.onerror = () => reject("Failed to save choices to IndexedDB");
        });
    };

    // Render form inputs that use handleChange
    return (
        <input
            type="text"
            value={formData[name] || ''}
            onChange={(e) => handleChange(name, e.target.value)}
        />
        // ... more form elements
    );
}

Any ideas on what would be causing the repeated errors or how I could troubleshoot more?