title: How to define interfaces in TypeScript to pass the props correctly?
body: <p>I have a simple component which renders a logo text</p>
  <pre><code>interface AppBarLogoProps = {
    logo: string;
  };
  
  export const AppBarLogo: FC&lt;AppBarLogoProps&gt; = ({ logo }) =&gt; {
    return (
      &lt;&gt;
        &lt;h1&gt;
          {logo}
        &lt;/h1&gt;
      &lt;/&gt;
    );
  };
  
  </code></pre>
  <p>and the AppBarTop component which is more complex than below, but the idea is that I want to pass the logo prop from AppBarTop  to AppBarLogo.</p>
  <p>The problem is that I have to use logo.logo notation. How should I define interfaces to use <code>return &lt;AppBarLogo logo={logo} /&gt;</code> instead of <code>return &lt;AppBarLogo logo={logo.logo} /&gt;</code> ?</p>
  <pre><code>interface AppBarTopProps {
    logo: AppBarLogoProps;
  }
  
  export const AppBarTop: FC&lt;AppBarTopProps&gt; = ({ logo }) =&gt; {
     return &lt;AppBarLogo logo={logo.logo} /&gt;
  }
  
  </code></pre>