为什么material UI react stepper没有选项卡焦点？

import React, { useState, useEffect } from 'react';
import classNames from 'classnames';

const Stepper = () => {
  const [activeStep, setActiveStep] = useState(0);

  const handleStepClick = (stepIndex) => {
    setActiveStep(stepIndex);
  };

  useEffect(() => {
    const handleKeyDown = (event) => {
      if (event.key === 'ArrowRight') {
        setActiveStep((prevStep) => Math.min(prevStep + 1, totalSteps - 1));
      } else if (event.key === 'ArrowLeft') {
        setActiveStep((prevStep) => Math.max(prevStep - 1, 0));
      }
    };

    document.addEventListener('keydown', handleKeyDown);
    return () => {
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, []);

  const steps = ['Step 1', 'Step 2', 'Step 3'];
  const totalSteps = steps.length;

  return (
    <div>
      <div className="step-container">
        {steps.map((step, index) => (
          <div
            key={index}
            className={classNames('step', { 'step-active': index === activeStep })}
            onClick={() => handleStepClick(index)}
            tabIndex={0}
          >
            {step}
          </div>
        ))}
      </div>
      <div className="content-container">
        {/* 根据activeStep渲染对应的内容 */}
      </div>
    </div>
  );
};

export default Stepper;