The Dropdown menu does not allow conditional rendering of children

[haideralsh]

Describe the bug

In our app, we need to do this when we have to conditionally render an item inside the DropdownMenu

      <DropdownMenu>
        <DropdownButton onClick={handleItemA}>
          {t("Item A")}
        </DropdownButton>

        {allowDeletion ? (
          <DropdownButton
            onClick={handleItemB}
          >
            {t("Conditional Item B")}
          </DropdownButton>
        ) : (
          // We need to do this because of a bug in NDS
          <></>
        )}
      </DropdownMenu>

Steps to reproduce

This causes a runtime error

      <DropdownMenu>
        <DropdownButton onClick={handleItemA}>
          {t("Item A")}
        </DropdownButton>

        {allowDeletion && (
          <DropdownButton
            onClick={handleItemB}
          >
            {t("Conditional Item B")}
          </DropdownButton>
        )}
      </DropdownMenu>

Expected behaviour

No response

Is your team blocked from moving forward by the bug?

No we have a workaround described above

Who would you like to fix the bug?

• [ ] Myself
• [X] DesignOps

When do you need this by?

N/A

Helpful resources

No response

Additional context

No response

[github-actions[bot]]

:tada: This issue has been resolved in version 9.0.2 :tada:

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot :package::rocket: