Material 3 Bottom App Bar - Centered FloatingActionButton moved icon to the left instead of right

My app in Material 2 is using a Bottom App bar this way:

<com.google.android.material.bottomappbar.BottomAppBar
    android:id="@+id/bar"
    style="@style/Widget.MaterialComponents.BottomAppBar.Colored"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:backgroundTint="@color/primarycolor"
    app:fabAlignmentMode="center"
    app:navigationIcon="@drawable/ic_menu_time"
    app:navigationIconTint="@color/lighttextcolor2"
    app:theme="@style/ThemeOverlay.MaterialComponents.Dark" />

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:backgroundTint="@color/fab"
    app:layout_anchor="@id/bar"
    app:rippleColor="#FFFF8888"
    app:srcCompat="@drawable/ic_fab_search"
    app:tint="@color/darktextcolor" />

Unfortunately, when I go the Material 3 by doing

  style="@style/Widget.Material3.BottomAppBar"

I get the the new m3 design, which is great, but my icons are now moved to the left!!!

WHAT I HAVE TRIED:

1. in my menu.xml, I added: android:layout_alignParentRight="true" but no effect
2. No more ideas...

Thanks a lot for any guidance/help

in your Bottom App Bar, add this, see image below

app:menuAlignmentMode="auto"

image