Chakra ui not working when use react slick

Question

I make slider using react-slick and chakra ui. Before I put as={Slider}, the style work fine. But after I use the Slider, the style is not work anymore.

Here is my code:

<HStack
  as={Slider}
  {...settings}
  bg={"white"}
  borderRadius={"xl"}
  mx={"auto"}
  p={4}
  mt={12}
  alignItems={"stretch"}
  justifyContent={"center"}
  gap={4}
  width={"90%"}>
  {menus.map((menu, i) => (
    <VStack key={i} alignItems={"center"} justifyContent={"space-between"}>
      <Image my={"auto"} src={menu.img} />
      <Text>{menu.name}</Text>
    </VStack>
  ))}
</HStack>

Here is the image before i use Slider:before

Here is the image after i use Slider:after

How to fix this?