Resizable Columns in Table Not Working

[kmarchandfindest]

### Affected Packages
@tiptap/extension-table
@tiptap/extension-table-row
@tiptap/extension-table-header
@tiptap/extension-table-cell

Version(s)
2.9.1

Description of the Bug
I am currently utilizing the editor equipped with the Table extension. The table and its commands are functioning properly, except for the resizable columns feature in the Table.configure. I have attempted various methods and custom implementations to enable column resizing, but none have yielded the desired results. The columns maintain a fixed size, preventing users from adjusting them by dragging the column borders. Additionally, I do not observe the resize cursor or handle when hovering over the columns.

Browser Used
Chrome

Code Example (Preferred)
Working as TipTap doc : https://tiptap.dev/docs/editor/extensions/nodes/table

Expected Behavior
Table column should be resizable with a resize-handle visible when hovering over the columns.

Additional Context (Optional)
My setup:

export const TiptapExtensionsKit = [
  StarterKit.configure({
    heading: {
      levels: [1, 2, 3],
    },
    horizontalRule: false,
    codeBlock: false,
    strike: false,
    code: false,
  }),
  Placeholder.configure({
    placeholder: "Type / to browse options",
  }),
  Highlight,
  Subscript,
  Superscript,
  Image,
  Table.configure({
    resizable: true,
    lastColumnResizable: false,
  }),
  TableRow,
  TableHeader,
  TableCell,
];

export const Editor: FC<IEditorProps> = ({
  onContentChangeAsync,
}: IEditorProps) => {
  const { editor, isEditOn } = useContext(EditorContext);
  const editorContainerRef = useRef<HTMLDivElement>(null);

  const onTransactionHandlerAsync = useCallback(
    async ({
      editor: updatedEditor,
      transaction,
    }: {
      editor: TiptapEditor;
      transaction: Transaction;
    }) => {
      if (transaction.steps.length > 0) {
        await onContentChangeAsync(JSON.stringify(updatedEditor.getJSON()));
      }
    },
    [onContentChangeAsync]
  );

  const debouncedOnTransactionHandlerAsync = useMemo(
    () =>
      debounce(onTransactionHandlerAsync, GeneralConstants.DEFAULT_MS_DELAY),
    [onTransactionHandlerAsync]
  );

  useEffect(() => {
    if (!editor) return;

    editor.on("transaction", debouncedOnTransactionHandlerAsync);

    return () => {
      editor.off("transaction", debouncedOnTransactionHandlerAsync);
    };
  }, [editor, debouncedOnTransactionHandlerAsync]);

  if (!editor) return null;

  return (
    <div ref={editorContainerRef} style={{ position: "relative" }}>
      <EditorLeftFloatingMenu editor={editor} isEditOn={isEditOn} />
      <EditorContent editor={editor} />
      {editorContainerRef.current && (
        <EditorFloatingLinkMenu
          editor={editor}
          appendTo={editorContainerRef.current}
        />
      )}
      {editorContainerRef.current && (
        <EditorFloatingTableMenu
          editor={editor}
          appendTo={editorContainerRef.current}
        />
      )}
      <EditorFloatingSelectMenu />
    </div>
  );
};

  const editor = useEditor({
    extensions: ExtensionsKit,
    content: "",
    autofocus: true,
    injectCSS: false,
    editable: isEditOn,
  });

// Extensions
import { TiptapExtensionsKit } from "./TiptapExtensionsKit";
import { CustomExtensionsKit } from "./CustomExtensionsKit";

export const ExtensionsKit = [...TiptapExtensionsKit, ...CustomExtensionsKit];

.ProseMirror {
    &.resize-cursor {
        cursor: ew-resize;
        cursor: col-resize;
      }
      
    .column-resize-handle {
        background-color: red;
        bottom: -2px;
        pointer-events: none;
        position: absolute;
        right: -2px;
        top: 0;
        width: 4px;
    }
}

Image of my editor with a table and HTML element (my cursor is hover the column) :