Why is this error message being sent while using the flicking package?

I am using the Flicking package & the Flicking component is creating the carousel just fine but every time I try to move (flick) one of the child components an error is created by the Flicking component as follows.

Flicking.ts:58 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'key')
    at Flicking.ts:58:19
    at Array.map (<anonymous>)
    at getPanels (Flicking.ts:57:28)
    at normalizeChildren (runtime-core.esm-bundler.js:6408:42)
    at createBaseVNode (runtime-core.esm-bundler.js:6170:9)
    at _createVNode (runtime-core.esm-bundler.js:6263:12)
    at createVNodeWithArgsTransform (runtime-core.esm-bundler.js:6128:12)
    at h (runtime-core.esm-bundler.js:7479:16)
    at Proxy.render (Flicking.ts:192:8)
    at renderComponentRoot (runtime-core.esm-bundler.js:893:44)

I have implemented the following code on Vue3

<Flicking class="px-3" :options="{ moveType: 'freeScroll', bound: true } ">
      <div @click="choosePref('1')>1</div>
      <div @click="choosePref('2')>2</div>
      <div @click="choosePref('3')>3</div>
      <div @click="choosePref('4')>4</div>

choosePref is a function that logs out the number in the div that was clicked.

const choosePref = (num) =>{

Is the issue in my way of implementing or is there some sort of bug in the package? and can you please explain what the error is about and how to fix it?

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum