Unexpected Token - optional chaining in an npm package

Bug report

Packages affected

• sandpack-client
• sandpack-react

Description of the problem

When I import an npm package which uses optional chaining it throws an error "Unexpected token":

/node_modules/@swedbankpay/design-guide/src/scripts/main/dropdown/index.js: Unexpected token (17:51)

  15 | const toggleMenu = container => isOpen(container) ? closeMenu(container) : openMenu(container);
  16 | 
> 17 | const toggleBtnListener = e => toggleMenu(e.target?.closest(".dropdown"));
     |                                                   ^
  18 | 
  19 | const listenToToggleBtn = toggleBtn => {
  20 |     try {

I tried adding environment: "parcel" to cutomSetup,
and/or bundlerURL: "https://sandpack-bundler.codesandbox.io" (and I also tried with bundlerURL: "https://83c59996.sandpack-bundler.pages.dev/" as seen in this other bug discussion https://github.com/codesandbox/sandpack/issues/481 ),
but it did not fix it. I would get theError message "too much recursion" on Firefox and "Maximum call stack size exceeded" on Chromium.

What were you doing when the problem occurred?

What steps can we take to reproduce the problem?

• use npm package "@swedbankpay/design-guide": "10.5.1"
• in code: add: import dg from "@swedbankpay/design-guide";

Link to sandbox: link (optional)

https://codesandbox.io/s/quirky-carlos-1mw0b6?file=/src/index.js

Your Environment