Testing toggle on space

I am doing a test to check if an accordion item can be expanded and collapsed by pressing space. here is my test:

test('should handle keyboard navigation', async ({ mount, page }) => {
  await mount(<Accordion id="accordion" items={data} />)

  const trigger = page.getByText(data[0].title)
  const content = page.getByText(data[0].content)

  // should focus
  await page.keyboard.press('Tab')
  await expect(trigger).toBeFocused()

  // should open by pressing space
  await page.keyboard.press(' ')
  await expect(content).toBeVisible()

  // should close by pressing space
  await page.keyboard.press(' ')
  await expect(content).not.toBeVisible()
})

the await expect(content).not.toBeVisible() is failing. Here is what the report says: locator resolved to <div role="region" data-focus="" data-state="open" da…>Yes. It adheres to the WAI-ARIA design pattern.</div>

• unexpected value "visible"

but when I test it in storybook, it closes when I press space. Anyone can help me identify what's wrong? I'm quite new with playwright, so I'm not sure if this is the "right" way of doing this