如何在react中延迟NavLink？

import React, { useState, useEffect } from 'react';
import { NavLink } from 'react-router-dom';

const DelayedNavLink = ({ to, delay, children }) => {
  const [isActive, setIsActive] = useState(false);

  useEffect(() => {
    const timeout = setTimeout(() => {
      setIsActive(true);
    }, delay);

    return () => clearTimeout(timeout);
  }, [delay]);

  return (
    <NavLink to={to} activeClassName="active" className={isActive ? 'active' : ''}>
      {children}
    </NavLink>
  );
};

// 使用示例
const App = () => {
  return (
    <nav>
      <DelayedNavLink to="/home" delay={1000}>
        Home
      </DelayedNavLink>
      <DelayedNavLink to="/about" delay={2000}>
        About
      </DelayedNavLink>
      <DelayedNavLink to="/contact" delay={3000}>
        Contact
      </DelayedNavLink>
    </nav>
  );
};

export default App;