title: Property 'children' is missing in type
body: <p>I am trying to setup Storybook with Typescript using <a href="https://github.com/babel/babel-loader" rel="noreferrer">babel-loader</a> and <a href="https://github.com/TypeStrong/ts-loader" rel="noreferrer">ts-loader</a>.</p>
  
  <p>Everything works fine except using <code>children</code> in a React component:</p>
  
  <pre><code>[tsl] ERROR in .../stories/index.stories.tsx(8,56)
        TS2769: No overload matches this call.
        Property 'children' is missing in type '{ title: string; }' but required in type 'Props'.
  </code></pre>
  
  <p>This is the <code>.storybook/main.js</code> file:</p>
  
  <pre><code>module.exports = {
    addons: [
      "@storybook/addon-knobs",
    ],
    stories: ["../packages/**/*.stories.tsx"],
    webpackFinal: async config =&gt; {
      config.module.rules.push({
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: require.resolve('ts-loader')
          },
          {
            loader: require.resolve('babel-loader'),
            options: {
              presets: [
                "@babel/preset-env",
                "@babel/preset-react"
              ]
            }
          }
        ],
      });
  
      config.resolve.extensions.push('.ts', '.tsx');
  
      return config;
    }
  };
  </code></pre>
  
  <p>This is the <code>index.stories.tsx</code> file:</p>
  
  <pre><code>import React from "react";
  
  import Collapsible from "../src";
  
  export default {
    title: "Collapsible"
  };
  
  const content = &lt;span&gt;Content&lt;/span&gt;;
  
  export const simpleCollapsible = () =&gt; (
    &lt;Collapsible title="Collapsible"&gt;{content}&lt;/Collapsible&gt;
  );
  </code></pre>
  
  <p>And this is the implementation of Collapsible:</p>
  
  <pre><code>import React, { ReactNode, useState } from "react";
  import styled, { ThemeProvider } from "styled-components";
  import {
    BorderProps,
    ColorProps,
    FlexboxProps,
    LayoutProps,
    SpaceProps,
    TypographyProps
  } from "styled-system";
  import Theme from "@atw/theme";
  
  import { KeyboardArrowDown } from "@styled-icons/material";
  
  import Box from '~/box';
  import Button from '~/button';
  
  interface Props
    extends BorderProps,
      ColorProps,
      FlexboxProps,
      LayoutProps,
      SpaceProps,
      TypographyProps {
    children: ReactNode;
    title: string;
  }
  
  const Collapsible = ({ children, title, ...rest }: Props) =&gt; {
    const [isCollapsed, setIsCollapsed] = useState(false);
  
    const handleCollapse = () =&gt; {
      setIsCollapsed(!isCollapsed);
    };
  
    return (
      &lt;ThemeProvider theme={Theme}&gt;
        &lt;Button
          border="none"
          padding={0}
          marginBottom={2}
          width={1}
          textAlign="start"
          onClick={handleCollapse}
          {...rest}
        &gt;
          &lt;IconBox isCollapsed={isCollapsed}&gt;
            &lt;KeyboardArrowDown size="24px" /&gt;
          &lt;/IconBox&gt;
          {title}
        &lt;/Button&gt;
        {!isCollapsed &amp;&amp; (
          &lt;Box display="flex" flexDirection="column"&gt;
            {children}
          &lt;/Box&gt;
        )}
      &lt;/ThemeProvider&gt;
    );
  };
  
  export default Collapsible;
  </code></pre>
  
  <p>Is there anything here I'm doing wrong?</p>