Why is react-nestable rendering [object Object] instead of expected JSX?

I am trying to render custom JSX snippets based on the objects stored in an array in using react nestable. But instead of the JSX snippet, [object Object] gets rendered on the screen. Here is my code

//Top of the component file
import Nestable from "react-nestable"

const template = [
  {
    id: uuid(),
    type: "button1",
    text: "Next"
  },
  {
    id: uuid(),
    type: "button2",
    text: ["Back", "Next"]
  }
]

//Inside the component function
const [items, setItems] = useState(template)

const renderItems = ({ item }) => {
    switch (item.type) {
      case "button1":
        return (
          <tr key={item.id} style={{ backgroundColor: "#ffffff" }}>
            <td colSpan="2" style={{ padding: "16px" }}>
              <button
                contentEditable="true"
                style={{
                  border: "none",
                  outline: "none",
                  backgroundColor: "#2563eb",
                  borderRadius: "7px",
                  padding: "8px 12px",
                  color: "#ffffff",
                  fontWeight: "500",
                  letterSpacing: "0.5px"
                }}
              >
                {item.text}
              </button>
            </td>
          </tr>
        )
      case "button2":
        return (
          <tr key={item.id} style={{ backgroundColor: "#ffffff" }}>
            <td style={{ padding: "16px" }}>
              <button
                contentEditable="true"
                style={{
                  border: "none",
                  outline: "none",
                  backgroundColor: "#db2777",
                  borderRadius: "7px",
                  padding: "8px 12px",
                  color: "#ffffff",
                  fontWeight: "500",
                  letterSpacing: "0.5px"
                }}
              >
                {item.text[0]}
              </button>
            </td>
            <td style={{ padding: "16px" }}>
              <button
                contentEditable="true"
                style={{
                  border: "none",
                  outline: "none",
                  backgroundColor: "#2563eb",
                  borderRadius: "7px",
                  padding: "8px 12px",
                  color: "#ffffff",
                  fontWeight: "500",
                  letterSpacing: "0.5px"
                }}
              >
                {item.text[1]}
              </button>
            </td>
          </tr>
        )
    }
  }

//Inside component return
<table style={{ width: "100%", textAlign: "center" }}>
 <Nestable items={items} renderItems={renderItems} />
</table>
              
            

OUTPUT:

When I paste the snippets that I returned in the function renderItems directly instead of the the snippet renders perfectly.

What I am expecting:

I have tried removing the inline styles, reinstalling the packages but did not work. Alternative approaches are welcomed.

I checked your code you need to change the key name that you are passing into Nestable component it's default API key name for renderItems is renderItem but your current key with renderItems 's' at last.

 <Nestable items={items} renderItem={renderItems} />