Opt input react component

import React, { useState } from 'react';

interface OtpInputProps {
  otpLength: number
  onChange: Function
}

const OtpInput: React.FC<OtpInputProps> = ({ otpLength = 6, onChange }) => {
  const [otp, setOtp] = useState('');
  const [focused, setFocused] = useState<boolean>(false);

  const handleChange = (event: any) => {
    const value = event.target.value;
    if (/^\d*$/.test(value) && value.length <= otpLength) {
      setOtp(value);
      onChange(value);
    }
  };

  const handleKeyDown = (event: any) => {
    if (event.key === 'Backspace' || event.key === 'Delete') {
      event.preventDefault();
      setOtp((prevOtp) => prevOtp.slice(0, -1));
    }
    else if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
      event.preventDefault();
    }
  };

  return (
    <div className="relative flex gap-2 w-fit">
      {Array.from({ length: otpLength }).map((_, index) => (
        <div
          key={index}
          className={`w-[45px] h-[50px] bg-blue-500 rounded-md flex items-center border-2 border-white justify-center text-white text-2xl 
            ${otp[index] ? '' : 'opacity-80'} 
            ${otp[index] === undefined ? '' : ''} 
            ${focused && (index === otp.length || (otpLength === otp.length && index === otpLength - 1)) ? 'ring-2 ring-primary' : 'ring-2 ring-transparent'} // Active block ring
            `}
        >
          {otp[index] || '-'}
        </div>
      ))}
      {/* Transparent input field */}
      <input
        type="text"
        inputMode="numeric"
        maxLength={otpLength}
        pattern="\d{6}"
        autoComplete="one-time-code"
        autoFocus={true}
        className="absolute top-0 left-0 w-full h-full bg-transparent caret-transparent text-transparent focus:outline-none ltr:text-left rtl:text-right
          selection:bg-transparent selection:text-transparent"
        value={otp}
        onChange={handleChange}
        onKeyDown={handleKeyDown}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
      />
    </div>
  );
};

export default OtpInput;