Target:closed in Playwright React Component Testing

I have been trying to test a slideshow React component with PlayWirght experimental component testing, following this presentation video. I'm having issues using the Locator.click() method, which results in the following error message:

Test timeout of 10000ms exceeded.
Pending operations:
  - locator.click at components/Slideshow.spec.jsx:24:59
Error: locator.click: Target closed
=========================== logs ===========================
waiting for locator('#root').locator('internal:control=component').getByRole('button', { name: 'Next' })
============================================================

Here is the related test:

test('should navigate to the next image on clicking the next button', async ({ mount }) => {
  const component = await mount(<Slideshow elements={[
    <img src="" alt="Slideshow Image 1" />,
    <img src="" alt="Slideshow Image 2" />,
    <img src="" alt="Slideshow Image 3" />,
  ]} />)

  await component.getByRole('button', { name: 'Next' }).click()

  const firstImage = component.getByAltText('Slideshow Image 1')
  expect(firstImage).not.toBeVisible()
  const secondImage = component.getByAltText('Slideshow Image 2')
  expect(secondImage).toBeVisible()
})

What I've tried:

• replacing component by the pageobject from the test arguments.
• replacing getByRole('button', { name: 'Next' }) by `locator('button[title="Next"]')
• doing both

Here's the component's HTML when I run it on the dev server:

<div class="overflow-x-hidden">
  <ul class="flex flex-row w-max">
    <!-- Some list items... -->
  </ul>
  <div class="relative text-center">
    <button title="Previous" class="before:content-['◀'] text-inherit text-xs mx-1"></button>   
    <button title="0" class="before:content-['●'] text-inherit text-xs mx-1 "></button>
    <button title="1" class="before:content-['●'] text-inherit text-xs mx-1 opacity-60"></button>
    <button title="Next" class="before:content-['▶'] text-inherit text-xs mx-1"></button>
  </div>
</div>

The whole project is a Next application, I don't know if it's relevant in this context...

Can you explain to me what this error means? Am I using the component testing feature right? Should I report a bug to the PlayWright team? Thank you for your insights.

EDIT: I've tried running the tests in UI mode (npx playwright test -c playwright-ct.config.js --ui), and I see absolutely nothing in the browser window (blank page for every test).

EDIT²: I also have more info from Firefox browser output:

Error: locator.click: Runtime.callFunction): Browser closed.
==================== Browser output: ====================
<launching> /home/sylvain/.cache/ms-playwright/firefox-1408/firefox/firefox -no-remote -headless -profile /tmp/playwright_firefoxdev_profile-5X9FFQ -juggler-pipe -silent
<launched> pid=55847
[pid=55847][err] *** You are running in headless mode.
[pid=55847][out] console.warn: services.settings: Ignoring preference override of remote settings server
[pid=55847][out] console.warn: services.settings: Allow by setting MOZ_REMOTE_SETTINGS_DEVTOOLS=1 in the environment
[pid=55847][out] Crash Annotation GraphicsCriticalError: |[0][GFX1-]: glxtest: VA-API test failed: failed to initialise VAAPI connection. (t=0.625662) [GFX1-]: glxtest: VA-API test failed: failed to initialise VAAPI connection.
[pid=55847][out] console.error: ({})
[pid=55847][out] 
[pid=55847][out] Juggler listening to the pipe
[pid=55847][out] console.error: (new SyntaxError("The URI is malformed.", (void 0), 133))
[pid=55847][out] console.error: ({})
[pid=55847][err] [Child 56541, Main Thread] WARNING: JSWindowActorChild::SendRawMessage (Conduits, ConduitClosed) not sent: !CanSend() || !mManager || !mManager->CanSend(): file /home/pwuser/firefox/dom/ipc/jsactor/JSWindowActorChild.cpp:57
[pid=55847][err] [Child 56541, Main Thread] WARNING: JSWindowActorChild::SendRawMessage (Conduits, ConduitClosed) not sent: !CanSend() || !mManager || !mManager->CanSend(): file /home/pwuser/firefox/dom/ipc/jsactor/JSWindowActorChild.cpp:57
[pid=55847][out] console.error: (new SyntaxError("The URI is malformed.", (void 0), 133))
[pid=55847][out] console.error: (new SyntaxError("The URI is malformed.", (void 0), 133))
[pid=55847][out] console.error: (new SyntaxError("The URI is malformed.", (void 0), 133))
[pid=55847][out] console.error: (new SyntaxError("The URI is malformed.", (void 0), 133))
[pid=55847][out] console.error: (new SyntaxError("The URI is malformed.", (void 0), 133))
[pid=55847][out] console.error: (new SyntaxError("The URI is malformed.", (void 0), 133))
[pid=55847][out] console.error: (new SyntaxError("The URI is malformed.", (void 0), 133))
[pid=55847][out] console.error: (new SyntaxError("The URI is malformed.", (void 0), 133))
[pid=55847][out] console.error: (new SyntaxError("The URI is malformed.", (void 0), 133))
[pid=55847][out] console.error: (new SyntaxError("The URI is malformed.", (void 0), 133))
[pid=55847][err] JavaScript error: http://localhost:3100/assets/index-c680e706.js, line 382: Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7Bkind%2C%20type%2C%20props%2C%20children%7D for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
[pid=55847][err] [ERROR glean_core] Error setting metrics feature config: Json(Error("EOF while parsing a value", line: 1, column: 0))
[pid=55847][out] console.error: (new SyntaxError("The URI is malformed.", (void 0), 133))
[pid=55847][out] console.error: (new SyntaxError("The URI is malformed.", (void 0), 133))
[pid=55847][out] console.error: (new SyntaxError("The URI is malformed.", (void 0), 133))
[pid=55847][out] console.error: (new SyntaxError("The URI is malformed.", (void 0), 133))
[pid=55847] <gracefully close start>
=========================== logs ===========================
waiting for getByRole('button', { name: 'Next' })
============================================================