Prosemirror-tables Menu item not visible

1

Actually I am a bit new to Prosemirror and i am trying to add tables support in my react based editor. I am stuck at a problem where i don’t see tables menu getting added to the menu bar.

Here is how my tables_menu.js looks like

import { MenuItem, Dropdown } from 'prosemirror-menu';
import {
    addColumnAfter,
    addColumnBefore,
    deleteColumn,
    addRowAfter,
    addRowBefore,
    deleteRow,
    mergeCells,
    splitCell,
    setCellAttr,
    toggleHeaderRow,
    toggleHeaderColumn,
    toggleHeaderCell,
    goToNextCell,
    deleteTable,
} from 'prosemirror-tables';

function item(label_name, cmd) {
    return new MenuItem({
        title: label_name,
        label: label_name,
        select: (state) => cmd(state),
        enable: (state) => true,
        run: (state, dispatch, view) => cmd(state, dispatch, view),
    });
}

export const tableMenu = [
    item('Insert column before', addColumnBefore),
    item('Insert column after', addColumnAfter),
    item('Delete column', deleteColumn),
    item('Insert row before', addRowBefore),
    item('Insert row after', addRowAfter),
    item('Delete row', deleteRow),
    item('Delete table', deleteTable),
    item('Merge cells', mergeCells),
    item('Split cell', splitCell),
    item('Toggle header column', toggleHeaderColumn),
    item('Toggle header row', toggleHeaderRow),
    item('Toggle header cells', toggleHeaderCell),
    item('Make cell green', setCellAttr('background', '#dfd')),
    item('Make cell not-green', setCellAttr('background', null)),
];

and here is how i adding the table menu

import {tableMenu} from "./tables_menu.js"

function App() {

    useEffect(() => {
        const CustomNodes = schema.spec.nodes
        const mySchema = new Schema({
            nodes: addListNodes( CustomNodes, "paragraph block*", "block"),
            marks: schema.spec.marks
        })
   // Get the existing menu items from example Setup
    let menu = buildMenuItems(mySchema)

    function cut(arr) {
        return arr.filter(item => item != null);
    }
    const tableDropdown = new Dropdown(cut(tableMenu), { label: 'Table' });
    menu.fullMenu.splice(3,0,[tableDropdown])
    console.log(menu)
    const view = new EditorView(document.querySelector("#editor"), {
            state: EditorState.create({
                doc: DOMParser.fromSchema(mySchema).parse(document.querySelector("#content")),
                plugins: [...exampleSetup({schema: mySchema, menuContent: menu.fullMenu}),tableEditing()]
            })
        })
    });

  return (
    <div className="App">
        <div id="editor" />
        <div id="content" />
    </div>
  );
}

any help is appreciated to understand why menubar is not updated with the table options.