How to correctly use the Thumbnail component in React Bootstrap? - react-bootstrap

Question

This is my mark-up:
<Thumbnail src="/path/to/image" />
This is the generated html:
<div src="/path/to/image" class="thumbnail" ><img src="/path/to/image" ></div>
This is the CSS (which comes from bootstrap-sass):
.thumbnail {
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: border 0.2s ease-in-out;
-o-transition: border 0.2s ease-in-out;
transition: border 0.2s ease-in-out;
}
.thumbnail > img, .thumbnail a > img {
display: block;
max-width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
}
And this is the result:
The issue is that the border is on the div. Because the image is smaller than the div this looks odd. I would prefer the border to be on the image. The second selector above, thumbnail > img, uses max-width, and this is essential to prevent a hi-resolution image springing out of its container. So - given these CSS rules to prevent the image springing out it looks the Thumbnail has correctly put the .thumbnail class on the containing div. But then the border is on the containing div, not on the img tag.
If I just put the Bootstrap img-thumbnail class directly on the image (and forget React-Bootstrap Thumbnail altogether) I get the result I want.
.img-thumbnail has the max-width and the border.
It looks like .thumbnail is coming from bootstrap-sass. So, overall, I'm not sure if this is a problem with react-bootstrap or bootstrap-sass. At any event the React-Bootstrap Thumbnail component does not work as I would expect. Is this an error or user error?