Nuxt中DataMap类序列化失败及PayloadPlugin水合错误问题

我在Stack Overflow查阅了相关问题，但仍未理清核心原因。为何这个继承自Map的简单DataMap类会触发错误：

500 Cannot stringify arbitrary non-POJOs

该类代码如下：

export class DataMap extends Map {
    constructor(...args:any){
      super(...(args as []))
    }
    updateFromList(values:Array<any>, key:string='id'){
      const self = this;
      values.forEach((_:any)=>{
        self.set(_[key], _)
      })
    }
}

我认为这是一个持有Map的简单对象，且已定义toJSON，为何无法正常使用？

更新 #

根据@kissu的建议我简化了类，方向似乎正确，但尝试编写以下PayloadPlugin后仍无法正常工作，请问正确编写和调试这类插件的方法是什么？

// ./src/plugins/payload.ts
export default definePayloadPlugin(() => {
    definePayloadReducer('DataMap', (data) => {
        if(data instanceof DataMap){
            return Array.from(data.entries())
        }
    })
    definePayloadReviver('DataMap', (data:[any])=>{
        return new DataMap(data)
    })
})

目前出现水合失败的错误：

nuxt.js?v=693fac13:98 [nuxt] error caught during app initialization Error: Unknown type DataMap
    at hydrate (parse.js?v=693fac13:105:13)
    at hydrate (parse.js?v=693fac13:60:40)
    at hydrate (parse.js?v=693fac13:60:40)
    at hydrate (parse.js?v=693fac13:125:19)
    at hydrate (parse.js?v=693fac13:125:19)
    at hydrate (parse.js?v=693fac13:125:19)
    at hydrate (parse.js?v=693fac13:60:40)
    at unflatten (parse.js?v=693fac13:132:9)
    at parse (parse.js?v=693fac13:16:9)
    at parsePayload (payload.js?v=693fac13:102:16)

内容的提问来源于stack exchange，提问作者Jamie Marshall