IndexedDB: Uncaught (in promise) DOMException

I am using indexedDB(via npm's idb wrapper) to store 2D Float32 arrays which represent audio channel data. It works fine for some time, however, when the length of one of the arrays reaches approximately 16658432, idb crashes with the exception in the title. Stack trace is pretty useless as I am using React in conjunction with Next.js, however from what I dag out, it appears it crashes at idb's caching part. Note: I can store multiple large arrays no problem, but everything breaks once either of them exceeds this "limit"

Is this a limitation I just have to deal with, or can this be worked around in some way? I could potentially split the 2D array into two arrays and store them as separate entries, but this is a less than ideal solution, which will cause the same problem once they grow too.

Just a simple wrapper around idb's transactions:

export const asyncPut = async (
  dbName: string,
  tableName: string,
  key: string,
  value: any // [Float32Array, Float32Array]
): Promise<void> => {
  try {
    const db = await asyncOpenDb(dbName, tableName);
    const transaction = db.transaction(tableName, "readwrite");
    await transaction.objectStore(tableName).put(value, key);
  } catch (error) {
    // I catch the error here
    console.error("**IDB Error:", error);
  }
};