I have a list of buttons in a array

```
  const menuItems = [
      {
        key: "delete",
        title: "Delete Order",
        showFor: "all",
      },
      {
        key: "cancel",
        title: "Cancel Order",

        showFor: "all",
      },
      {
        key: "confirm",
        title: "Confirm Order",

        showFor: "unconfirmed",
      },
    ];

```

Now what i want to render it conditionally,for example i will check if the current state of the component and then render it accordingly.
For example in confirmed order want to show only the delete and cancel not the confirm one.
But for unconfirmed order i want to show all them of them.

Currently i am doing like this

```
   {currentTable === "notconfirmed"
          ? menuItems.map((item) => {
              return (
                <Menu.Item key={item.key}>
                    <div>{item.title}</div>
                  </div>
                </Menu.Item>
              );
            })
          : menuItems
              .filter((item) => item.showFor != "unconfirmed")
              .map((kk) => {
                return (
                  <Menu.Item key={kk.key}>
                    <div>
                      <div>{kk.title}</div>
                    </div>
                  </Menu.Item>
                );
              })}

```

It is working fine but this looks really messy any clean way of doing this?