How to unselect the menu.item (ant) if using the menu inside one component?

Question

i have used menu and menu.item from ant , but im facing one issue BC im using one react component to draw the menu for a list array that includes menus and submenus .

this how it's look

and this is my code

 <StyledCollapse ghost>
          {categoriesTree ? (
            categoriesTree.map((item, index) => {
              return (
                <Panel key={index} header={<StyledCategoryRow>{item.name}</StyledCategoryRow>}>
                  <StyledMenu multiple={false}>
                    {item.names.map((category, index) => {
                      return (
                        <StyledPlanMenuItem key={index}>
                          <Row align="middle" gutter={[8, 0]}>
                            <Col span={24}>
                              <Link to={getUrl(`/${category.name.replace(/\s/g, '')}`)}>
                                {category.name}
                              </Link>
                            </Col>
                          </Row>
                        </StyledPlanMenuItem>
                      );
                    })}
                  </StyledMenu>
                </Panel>
              );
            })
          ) : (
            <Spin />
          )}
        </StyledCollapse>

i want to select only one menu.item at one time

Answer 1

1. Make sure that there are no duplicate keys. 2.Still if the issue doesn't resolve you can use refs from react to handle click event. for more you can take reference from official site: https://reactjs.org/docs/hooks-reference.html#useref