Clicking and focusing on other squares on isCompleted

[H7ioo]

I want to be able to click an move the cursor to the square that I clicked on when the state is completed.
Use case: on phone every square is filled out and I want to go left and right without deleting the existing number to get back.

[H7ioo]

I made a workaround: getting the slot (squares) position to check if I clicked on it or not.
Note: the input is on top of the slots, so you can't just add onClick to the slots.

The only issue for now is when I click on the input first it goes to the end of the input then to the clicked slot

  const handleContainerClick = (e: React.MouseEvent<HTMLDivElement>) => {
    if (inputRef.current) {
      const containerRect = e.currentTarget.getBoundingClientRect();
      const clickX = e.clientX - containerRect.left;
      const slotWidth = containerRect.width / props.maxLength!;
      const clickedSlotIndex = Math.floor(clickX / slotWidth);

      inputRef.current.focus();
      inputRef.current.setSelectionRange(
        clickedSlotIndex,
        clickedSlotIndex + 1,
      );
    }
  };

  const handleOTPDoubleClick = () => {
    if (!inputRef.current) return;
    inputRef.current.select();
  };