More menu focus lose with keyboard when used in Treetable

[muhtomakin]

Describe the bug

import React, { useState, useEffect, useRef } from 'react';
import { TreeTable } from 'primereact/treetable';
import { Column } from 'primereact/column';
import { Menu } from 'primereact/menu';
import { Button } from 'primereact/button';
import { NodeService } from './service/NodeService';

export default function BasicDemo() {
  const [nodes, setNodes] = useState([]);
  const menu = useRef(null);

  useEffect(() => {
    NodeService.getTreeTableNodes().then((data) => setNodes(data));
  }, []);

  const items = [
    {
      label: 'Edit',
    },
    {
      label: 'Delete',
    },
  ];

  const actionTemplate = () => {
    return (
      <>
        <Menu model={items} ref={menu} popup />
        <Button
          icon="pi pi-ellipsis-h"
          onClick={(event) => menu?.current?.toggle(event)}
        />
      </>
    );
  };

  return (
    <div className="card">
      <TreeTable value={nodes} tableStyle={{ minWidth: '50rem' }}>
        <Column field="name" header="Name" expander></Column>
        <Column field="size" header="Size"></Column>
        <Column field="type" body={actionTemplate}></Column>
      </TreeTable>
    </div>
  );
}

This is the example code of bug. After opening the more menu, just try to reach the menu items with keyboard and it is jumping.

Reproducer

No response

PrimeReact version

10.6.3

React version

18.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

ALL

Steps to reproduce the behavior

Just copy the code for any Treetable example.

Expected behavior

No response