Avatar isn't displayed when custom content is used

[ClydeDz]

Hi,

I've been using this library for my chat app, and it's been so easy to get something done really quickly.

I'm stuck with this problem - when displaying custom content like the code snippet below, I cannot get the Avatar to display beside it. I've tried several combinations with no luck. Any idea how to fix this?

This is the code snippet:

 <Message
    key={index}
    model={{
      type: "custom",
      sentTime: message.timestamp,
      sender: message.from,
      direction:  "incoming"
    }}
    children={<Avatar src="image-location.jpg" name="profile name" />}
    avatarSpacer={true}
  >
    <Message.CustomContent>
      <div>
        <Button border>Some action goes here</Button> 
      </div>
    </Message.CustomContent>
  </Message>

This is the output: