JSQMessage outgoing bubble alignment issue

I'm using JSQMessagesViewController and whenever I send a message my outgoing bubble aligns to left like this, https://i.sstatic.net/WHQI4.png My incoming bubble is aligning correctly to left but I want my outgoing bubble to align at right side.

Here is what I'm doing with my collectionView:

lazy var outgoingBubble: JSQMessagesBubbleImage = {
        return JSQMessagesBubbleImageFactory()!.outgoingMessagesBubbleImage(with: UIColor.jsq_messageBubbleBlue())
    }()
    
lazy var incomingBubble: JSQMessagesBubbleImage = {
        return JSQMessagesBubbleImageFactory()!.incomingMessagesBubbleImage(with: UIColor.jsq_messageBubbleLightGray())
    }()

override func collectionView(_ collectionView: JSQMessagesCollectionView!, messageBubbleImageDataForItemAt indexPath: IndexPath!) -> JSQMessageBubbleImageDataSource!   
{
      if messages[indexPath!.item].senderId! == self.senderID{
          return outgoingBubble
       } else{
          return incomingBubble
       }
  }

I've got this. The issue: I was not assigning senderId and senderDisplayName. After I've assigned it's values in viewDidLoad() it worked perfectly.

 override func viewDidLoad() {
        super.viewDidLoad()

        self.senderId = senderID
        self.senderDisplayName = "User"
    }