I have an application like quiz. Every single slider has one input. I want to autofocus the related input when the user clicks on the next button or press on the enter.

I tried to achieve it by using useEffect. However, it doesn't work.

This is the related function which includes the next function of slick and focus attribute of inputs:

const inputRef = useRef([]);

const handleEnter = (event, index) => {
      if (event.key.toLowerCase() === "enter") {
          sliderRef.current.slickNext(); // The next slider function of the react-slick package
          inputRef.current[index].focus()
      }
}

Here are my inputs in map function:

{data.map((post, index) => (
  <Input 
     id={post.question_uuid} 
     name={post.question_uuid} 
     onKeyDown={e => {handleEnter(e, index)}}
     autoComplete="off
     ref={el => inputRef.current[index] = el}
  />
))}