I want to access dom even in a modal with React-slick (useRef)

Currently, I’m using react-slick to implement it.
I want to access the slider dom with useref (ref.cuurent), but the moment the modal opens, it becomes null.
You can access it by sliding it.
I think it’s probably because I’m accessing it within a modal.
How do I get a ref.cuurent the moment the modal opens?

export const index: React.FC = () => {
    const [isShowHowToModal, setIsHowToModal] = useState(true)

    return (
        <Box>
            <div>hello</div>
            {isShowHowToModal && <Modal setIsHowToModal={setIsHowToModal} />}
        </Box>
    )
}

import Slider from 'react-slick'

export const Modal = React.FC<Props>(setIsModal) => {
  
  const onClickCancel = () => {
    setIsModal(false)
  }

  const refs = useRef<Slider>(null)
  console.log(refs)

  const settings = {
    dots: false,
    infinite: false,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
  }

  return (
    <Slider ref={refs} {...settings}>
      <div>aaa</div>
      <div>bbb</div>
      <div>ccc</div>
    </Slider>
}

It would be helpful if you could answer with the function component.