Nuxt error when going backwards

[foxilated]

Note that I have wrapped the component with ClientSideOnly, like this

<ClientOnly>
    <div
      class="bg-background-dark/50 top-0 left-0 w-screen h-screen flex flex-col items-center justify-center z-[120]"
    >
      <FlipBook
        class="w-[80vw] h-[70vh] rounded-3xl flex flex-col items-center justify-center"
        v-slot="flipbook"
        :clickToZoom="false"
        :singlePage="false"
        :gloss="0"
        :pages="images"
        v-if="isVisible"
      >
      </FlipBook>
    </div>
  </ClientOnly>

This is the error

[Vue warn]: Unhandled error during execution of render function 
  at <Flipbook key=0 class="w-[80vw] h-[70vh] rounded-3xl flex flex-col items-center justify-center" clickToZoom=false  ... > 
  at <ClientOnly> 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< 
Proxy { <target>: Proxy, <handler>: {…} }
 > > 
  at <RouteProvider key="/ar/newspaper" vnode= 
Object { __v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, ref: {…}, scopeId: null, slotScopeIds: null, children: null, component: null, … }
 route= 
Object { fullPath: "/ar/newspaper", hash: "", query: {}, name: "newspaper___ar", path: "/ar/newspaper", params: {}, matched: (1) […], meta: Proxy, redirectedFrom: undefined, href: "/ar/newspaper" }
  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <Default ref=Ref< 
Proxy { <target>: {…}, <handler>: {…} }
 > > 
  at <LayoutLoader key="default" layoutProps= 
Object { ref: {…} }
 name="default" > 
  at <NuxtLayoutProvider layoutProps= 
Object { ref: {…} }
 key="default" name="default"  ... > 
  at <NuxtLayout> 
  at <App key=3 > 
  at <NuxtRoot> [deps:1449:13](http://localhost:3000/_nuxt/node_modules/.cache/vite/client/deps/)
[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
  at <Flipbook key=0 class="w-[80vw] h-[70vh] rounded-3xl flex flex-col items-center justify-center" clickToZoom=false  ... > 
  at <ClientOnly> 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< 
Proxy { <target>: Proxy, <handler>: {…} }
 > > 
  at <RouteProvider key="/ar/newspaper" vnode= 
Object { __v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, ref: {…}, scopeId: null, slotScopeIds: null, children: null, component: null, … }
 route= 
Object { fullPath: "/ar/newspaper", hash: "", query: {}, name: "newspaper___ar", path: "/ar/newspaper", params: {}, matched: (1) […], meta: Proxy, redirectedFrom: undefined, href: "/ar/newspaper" }
  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <Default ref=Ref< 
Proxy { <target>: {…}, <handler>: {…} }
 > > 
  at <LayoutLoader key="default" layoutProps= 
Object { ref: {…} }
 name="default" > 
  at <NuxtLayoutProvider layoutProps= 
Object { ref: {…} }
 key="default" name="default"  ... > 
  at <NuxtLayout> 
  at <App key=3 > 
  at <NuxtRoot> [deps:1449:13](http://localhost:3000/_nuxt/node_modules/.cache/vite/client/deps/)
Uncaught (in promise) TypeError: Expected a `number[]` with length 6 or 16.
    NuxtJS 67