Animation is not applied when hovering sidebar - css

Question

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>

Answer 1

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"}
>...