expo-router Stack.Screen headerTitle aligned to left instead of center

[alexclinky]

If you render the Dropdown Menu Usage example code in a headerTitle it is aligned to left instead of right. If you use a View with a Text then it defaults to the center.

<Stack.Screen
        options={{
          headerTitle: () => (
            <ChatHeaderCentre
              chatContents={chatContents}
              isTyping={isTyping}
              onlineStatus={onlineStatus}
            />
          ),     
        }}
/>

How to align it to the right?

[alexclinky]

Example, stuck to the left hand side; adding style such as flex: 1, doesn't work.