fix: image captions (#986)

[![PR App][icn]][demo] | Ref RM-10929
:-------------------:|:----------:

## 🧰 Changes

Fixes rendering some captions.

It's super unclear to me why sometimes the image saves the caption as
children and sometimes as a prop. But it wasn't rendering the children!

## 🧬 QA & Testing

- [Broken on production][prod].
- [Working in this PR app][demo].


[demo]: https://markdown-pr-PR_NUMBER.herokuapp.com
[prod]: https://SUBDOMAIN.readme.io
[icn]:
https://user-images.githubusercontent.com/886627/160426047-1bee9488-305a-4145-bb2b-09d8b757d38a.svg

__tests__/browser/markdown.test.js

@@ -20,6 +20,7 @@ describe('visual regression tests', () => {
       //'features',
       'headings',
       'images',
+      'imageTests',
       'lists',
       'mdxComponents',
       'tables',

components/Image/index.tsx

@@ -58,7 +58,7 @@ const Image = (Props: ImageProps) => {
     setLightbox(!lightbox);
   };
 
-  if (caption) {
+  if (children || caption) {
     return (
       <figure>
         <span

docs/image-tests.mdx

@@ -0,0 +1,35 @@
+We're excited you're here! :blue_heart:
+
+<Image src="https://owlbertsio-resized.s3.amazonaws.com/Blocks.psd.full.png">
+  Owlbert!
+</Image>
+
+<Table align={["left","left","left"]}>
+  <thead>
+    <tr>
+      <th style={{ textAlign: "left" }} />
+
+      <th style={{ textAlign: "left" }} />
+
+      <th style={{ textAlign: "left" }} />
+    </tr>
+  </thead>
+
+  <tbody>
+    <tr>
+      <td style={{ textAlign: "left" }} />
+
+      <td style={{ textAlign: "left" }} />
+
+      <td style={{ textAlign: "left" }} />
+    </tr>
+
+    <tr>
+      <td style={{ textAlign: "left" }} />
+
+      <td style={{ textAlign: "left" }} />
+
+      <td style={{ textAlign: "left" }} />
+    </tr>
+  </tbody>
+</Table>

example/docs.ts

@@ -17,6 +17,8 @@ import headings from '../docs/headings.md';
 // @ts-ignore
 import images from '../docs/images.md';
 // @ts-ignore
+import imageTests from '../docs/image-tests.mdx';
+// @ts-ignore
 import lists from '../docs/lists.md';
 // @ts-ignore
 import mdxComponents from '../docs/mdx-components.mdx';
@@ -42,6 +44,7 @@ const fixtures = Object.entries({
   gettingStarted,
   headings,
   images,
+  imageTests,
   lists,
   mdxComponents,
   sanitizingTests,