Animation is not applied when hovering sidebar

Issue

I use chakra ui.
When I hover the sidebar, the sidebar extends to the right. I am using transition, but the animation is not applied. It is a bit choppy.
I am using transition="all 0.3s" but no animation happens when hover is applied.
I don't know why.If anyone can help me understand, I would appreciate your help.

code enter link description here

    <Flex
      background="blue.50"
      flexDirection="column"
      height="100vh"
      justifyContent="space-between"
      onMouseEnter={() => setState((prevState) => !prevState)}
      onMouseLeave={() => setState((prevState) => !prevState)}
      position="fixed"
      width={state ? "204px" : "54px"}
      zIndex={10}
    >
      <Box transition="all 0.3s">
        <HStack p={3}>
          <Flex alignItems="center">
            <Image
              display={state ? "none" : "inline-block"}
              height="24px"
              src={""}
              transition="all 0.3s ease-in-out"
            />
            <Image
              display={state ? "inline-block" : "none"}
              src={"chakra_logo.png"}
            />
          </Flex>
          <Text display={state ? "inline-block" : "none"} fontSize="xs">
            logo
          </Text>
        </HStack>
        <VStack mt={3} spacing={0}>
          <Box _hover={{ backgroundColor: "gray.200" }} width="full">
            <Link>
              <a>
                <HStack p={3}>
                  <BiSearchAlt />
                  <Text display={state ? "inline-block" : "none"} fontSize="sm">
                    search
                  </Text>
                </HStack>
              </a>
            </Link>
          </Box>
          <Box _hover={{ backgroundColor: "gray.200" }} width="full">
            <Link>
              <a>
                <HStack p={3}>
                  <AiOutlineSetting />
                  <Text display={state ? "inline-block" : "none"} fontSize="sm">
                    setting
                  </Text>
                </HStack>
              </a>
            </Link>
          </Box>
        </VStack>
      </Box>
      <VStack mb={2} spacing={0}>
        <Box mb={2} px={3} width="full">
          <Divider borderColor="gray.300" />
        </Box>
        <Box _hover={{ backgroundColor: "gray.200" }} p={3} width="full">
          <HStack>
            <Image
              alt="MyImage"
              src={""}
              width="24px"
            />
          </HStack>
        </Box>
      </VStack>
    </Flex>

Solution

You need to add CSS transition to main Flex also:

<Flex
      background="blue.50"
      flexDirection="column"
      height="100vh"
      justifyContent="space-between"
      onMouseEnter={() => setState((prevState) => !prevState)}
      onMouseLeave={() => setState((prevState) => !prevState)}
      position="fixed"
      width={state ? "204px" : "54px"}
      zIndex={10}
      transition={"all .2s ease"}
    >...

Answered By - sanjay jaluthriya