React hooks onClick icon change is not working

I want to change my icon onClick. But for some that is not working. What I have done is that, if there is submenuIcon1, it will be rendered. If someone clicks on the submenu option, it will render the submenuIcon2, based on the clicked variable.
Maybe I have done something wrong in the ternary operations. Please can someone help me regarding this?
Required Behavior
Whenever clicking on the submenu options, the icon will change. In this case it will be from submenuIcon1 to submenuIcon2.
Current Behavior
Clicking on the submenu options, the icon doesn’t change.
What I have done so far is that,

const SidebarTitle = () => {
  return (
    <>
      <Box
        width='200px'
        height='160px'
        textAlign='start'
        bgColor='#473198'
        px={5}
        borderRadius={2}
      >
        <Text fontSize='2xl' color='white' fontFamily='Fjord One'>
         Some title
        </Text>
      </Box>
    </>
  );
};

export default function Sidebar() {
  const [selectedSubMenu, setSelectedSubMenu] = useState("");
  const [clicked, setClicked] = useState(false);
  let location = useLocation();

  const handleClick = (title) => {
    setClicked(!clicked);
    if (title === selectedSubMenu) {
      setSelectedSubMenu("");
    } else {
      setSelectedSubMenu(title);
    }
  };

  return (
    <div>
      <Box
        display='flex'
        justifyContent='flex-start'
        alignItems='flex-start'
        mb={10}
      >
        <Box>
          <SidebarTitle />
          {sidebarItems.map((items) => {
            return (
              <Box
                width='200px'
                textAlign='start'
                cursor='pointer'
                onClick={() => {
                  handleClick(items.title);
                  
                }}
                fontFamily='Fjord One'
                boxShadow='lg'
                _hover={{
                  bgColor: "#1a2963",
                  color: "white",
                }}
                key={items.title}
              >
                <Link
                  to={items.url}
                  as={RouterLink}
                  width='100%'
                  _focus={{
                    boxShadow: "none",
                  }}
                  style={{ textDecoration: "none" }}
                >
                  <Box display='flex' justifyContent='space-between'>
                    <Text fontSize='xl' alignItems='flex-start'>
                      {items.title}
                    </Text>
                    {!!items.submenuIcon1 ? (
                      <Box alignItems='flex-start'>{items.submenuIcon1}</Box>
                    ) : clicked ? (
                      <Box alignItems='flex-start'>{items.submenuIcon2}</Box>
                    ) : (
                      <Box></Box>
                    )}
                  </Box>
                </Link>

                <Collapse
                  in={items.title === selectedSubMenu}
                  transition={{ enter: { delay: 0.1 }, exit: { delay: 0.1 } }}
                >
                  {items.subMenu?.map((item) => {
                    return (
                      <Box
                        bgColor='#e4e8e5'
                        boxShadow='md'
                        textAlign='start'
                        width='200px'
                        color='black'
                        _hover={{
                          bgColor: "#666666",
                          color: "white",
                        }}
                        key={item.title}
                        onClick={(event) => {
                          event.stopPropagation();
                        }}
                      >
                        <Link
                          to={item.url}
                          as={RouterLink}
                          width='100%'
                          _focus={{
                            boxShadow: "none",
                          }}
                          style={{ textDecoration: "none" }}
                        >
                          <Text fontFamily='Fjord One'>{item.title} </Text>
                        </Link>
                      </Box>
                    );
                  })}
                </Collapse>
              </Box>
            );
          })}
        </Box>

        <Box width='100%'>
          <TransitionGroup>
            <CSSTransition
              key={location.pathname}
              classNames='fade'
              timeout={300}
            >
              <Routes location={location.pathname}>
              //routes
              </Routes>
            </CSSTransition>
          </TransitionGroup>
        </Box>
      </Box>
    </div>
  );
}