@testing-library/react click event does not bubble to parent elements

Question

I have the following code in a test using react-testing-library, which is taking the header on a DataTable that has the text "Name" and clicks on that element. However for some reason the event does not bubble up to the button element and the click does not trigger. If I explicitly state that I want the parent element that is the button then it does trigger. The bubbles property does not seem to work. Any ideas?

Doesn't work:

render(<DataTableV2 columns={columns} data={data} />);
const body = await screen.getByTestId('datatable.body');
const head = await screen.getByTestId('datatable.head');
const nameHeaderBtn = await within(head).getByText('Name');
fireEvent.click(nameHeaderBtn, { bubbles: true });

Works:

const nameHeaderBtn = await within(head).getByText('Name').parentElement.parentElement;
fireEvent.click(nameHeaderBtn, { bubbles: true });

Rendered HTML:

<button class="inner">
  <div class="css-1qnchzl-truncate">
    <div tabindex="-1">Name</div>
  </div>
</button>