fix: Table filter throw react warning (#43139)

components/table/__tests__/Table.filter.test.tsx

@@ -134,6 +134,8 @@ describe('Table.filter', () => {
   });
 
   it('renders empty menu correctly', () => {
+    resetWarned();
+
     const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
     const { container } = render(
       createTable({

components/table/hooks/useFilter/FilterWrapper.tsx

@@ -13,10 +13,21 @@ const onKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (event) => {
   }
 };
 
-const FilterDropdownMenuWrapper: React.FC<FilterDropdownMenuWrapperProps> = (props) => (
+const FilterDropdownMenuWrapper = React.forwardRef<HTMLDivElement, FilterDropdownMenuWrapperProps>(
-  <div className={props.className} onClick={(e) => e.stopPropagation()} onKeyDown={onKeyDown}>
+  (props, ref) => (
-    {props.children}
+    <div
-  </div>
+      className={props.className}
+      onClick={(e) => e.stopPropagation()}
+      onKeyDown={onKeyDown}
+      ref={ref}
+    >
+      {props.children}
+    </div>
+  ),
 );
 
+if (process.env.NODE_ENV !== 'production') {
+  FilterDropdownMenuWrapper.displayName = 'FilterDropdownMenuWrapper';
+}
+
 export default FilterDropdownMenuWrapper;