In a page of a Next.js application, I have the following code:

const router = useRouter()
console.log('catchall', router.query.catchall)
return

When I type in the browser’s address bar:
http://localhost:3000/events/cat/dog

the console.log statement prints:

‘catchall’, Array(2) [0: “cat”, 1: “dog”]

After that, I changed the code to:

const router = useRouter()
console.log('catchall', router.query.catchall)
const [element1,element2] = router.query.catchall 
return

and when I type in the browser’s address bar: http://localhost:3000/events/cat/dog
the program crashes with the following error message:

Server Error
TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
pages/events/[...catchall].jsx (15:33) @ router

  13 |     console.log('catchall', router.query.catchall)
  14 |
> 15 |     const [element1,element2] = router.query.catchall 
     |                                 ^
  16 |
  17 |     return
  18 |

Can you explain what is happening?
Thank you.