relay/must-colocate-fragment-spreads not working as expected on union types

[richardtagger]

With the following code I'm getting issues on fragment spreads. I've tried shifting things about a bit but can't work out what the issue is. The code executes fine at runtime.

export const MessageSenderAvatar: FC<MessageSenderAvatarProps> = ({
  messageSenderAvatarRef = null,
}) => {
  const fragmentRef = useFragment(
    graphql`
      fragment MessageSenderAvatarFragment on Message {
        sender {
          __typename
          ... on User {
            ...UserAvatarFragment <--- ISSUE
          }
          ... on Bot {
            ...BotAvatarFragment <--- ISSUE
          }
        }
      }
    `,
    messageSenderAvatarRef
  );

  if (fragmentRef == null) {
    return null;
  }

  if (fragmentRef.sender.__typename === 'User') {
    return <UserAvatar userAvatarRef={fragmentRef.sender} />;
  }

  if (fragmentRef.sender.__typename === 'Bot') {
    return <BotAvatar botAvatarRef={fragmentRef.sender} />;
  }

  return <AnonymousUserAvatar />;
};

and UserAvatar such as

export const UserAvatar: FC<UserAvatarProps> = ({ userAvatarRef, size = AvatarSize.Size40 }) => {
  const { avatarUrlTemplate, displayName } = useFragment(
    graphql`
      fragment UserAvatarFragment on User {
        avatarUrlTemplate
        displayName
      }
    `,
    userAvatarRef
  );

  return (
    <AvatarView
      name={displayName}
      imageUrl={getScaledUrlTemplate(avatarUrlTemplate, size)}
      size={size}
    />
  );
};