const SliderTwo = ({ children }) => {
  const sliderRef = React.useRef(null);
  React.useEffect(() => {
    const track = sliderRef.current.innerSlider.list.querySelector(
      ".slick-track"
    );
    const focusSlider = setTimeout(() => {
      const slide = track.querySelector(".slick-slide");
      slide.focus();
    }, 0);
    return () => focusSlider;
  }, []);
  const handleNextClick = () => sliderRef.current.slickNext();
  const handlePrevClick = () => sliderRef.current.slickPrev();
  return (
    <>
      <NextArrow onClick={handleNextClick} />
      <PrevArrow onClick={handlePrevClick} />
      <Slider
        arrows={false}
        fade={true}
        infinite
        slidesToShow={1}
        ref={sliderRef}
      >
        {children}
      </Slider>
    </>
  );
};
