React router NavLink activeClassName不适用于redux和样式组件

import { NavLink, useLocation } from 'react-router-dom';
import { useSelector } from 'react-redux';
import styled from 'styled-components';

const StyledNavLink = styled(NavLink)`
  /* 样式组件的样式 */
`;

const CustomNavLink = ({ to, activeClassName, children }) => {
  const location = useLocation();
  const isActive = location.pathname === to;

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

const App = () => {
  const isAuthenticated = useSelector(state => state.auth.isAuthenticated);

  return (
    <nav>
      <CustomNavLink to="/" activeClassName="active">
        Home
      </CustomNavLink>
      {isAuthenticated && (
        <CustomNavLink to="/dashboard" activeClassName="active">
          Dashboard
        </CustomNavLink>
      )}
    </nav>
  );
};