Is there an existing issue for this?

• I have searched the existing issues
• I have read the guide to filing a bug

Steps to reproduce

As you can see on the first destination there's a hover highlight that's off-center with the icon, while when the second destination is selected, the selected highlight is properly center-aligned with the icon. This makes a weird effect, specially when I hover my mouse over a selected destination:

I caught this bug when I updated to Material 3, on Material 2 it was working fine.

Expected results

Both the selected and hovering highlighted areas should be center aligned.

Actual results

The hovering highlight is left aligned while the selected highlight is center aligned with the destination icon.

Code sample

NavigationRail(
            labelType: NavigationRailLabelType.all,
            onDestinationSelected: (index) {
              setState(() => selectedIndex = index);
            },
            destinations: const [
              NavigationRailDestination(icon: Icon(Icons.description), label: Text('My long label 1')),
              NavigationRailDestination(icon: Icon(Icons.currency_bitcoin), label: Text('My long label 2')),
              NavigationRailDestination(icon: Icon(Icons.view_list), label: Text('My long label 3')),
            ], selectedIndex: selectedIndex,
          )

Flutter Doctor output

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.10.2, on Microsoft Windows [Version 10.0.19045.2965], locale pt-BR)
[✓] Windows Version (Installed version of Windows is version 10 or higher)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Chrome - develop for the web
[✓] Visual Studio - develop for Windows (Visual Studio Community 2022 17.1.6)
[✓] Android Studio (version 2022.2)
[✓] IntelliJ IDEA Ultimate Edition (version 2023.1)
[✓] VS Code (version 1.73.1)
[✓] Connected device (3 available)
[✓] Network resources

• No issues found!