Storybook not rendering all React props in the controls and docs when using imported types

Describe the bug Storybook is not showing all the props in controls and docs. It happens when I import a Typescript type from another file.

To Reproduce

1. Create a file with some typing:

// colors.ts
export type TextColor = 'red' | 'blue';

1. Then use the created type in a component

// Text.tsx
import React, { FC } from 'react';
import TextColor from './colors';

export type Props = {
  textColor: TextColor;
  text: string;
};

const Text: FC<Props> = ({ textColor, text }) => (
  <div style{{ color: textColor }}>{ text }</div>
)

If I do that, only text appears in the controls and docs.

Expected behavior All props should appear in the controls and docs panels.

Screenshots This is my props definition:

This is what appears in controls. It is missing iconColor and color.

This is what appears in docs. Also missing iconColor and color and icon has no description.

This is the typing of Icons, TextColor and ButtonColor:

Code snippets See to reproduce section

System: System: OS: Windows 10 10.0.19041 CPU: (4) x64 Intel® Core™ i7-4500U CPU @ 1.80GHz Binaries: Node: 12.13.0 - C:\Program Files\nodejs\node.EXE npm: 6.12.0 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: 85.0.4183.102 Edge: Spartan (44.19041.423.0), Chromium (85.0.564.51) npmGlobalPackages: @storybook/cli: 6.0.21

[gregg-cbs]

I am having this issue, all my other components work fine, but all of a sudden this new one doesnt? And i cant figure out why.

// storybook
import React from 'react'
import { ComponentStory } from '@storybook/react'

import IconText from '../../components/theme/Diageo/DIconText'
import LocationIcon from '../../components/icons/LocationIcon'

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: 'Base/IconText',
  component: IconText,
}

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template: ComponentStory<typeof IconText> = (args) => <IconText {...args} />

export const Base = Template.bind({})

// IconText component
import React from 'react'

type IconTextProps = {
  icon: JSX.Element
  text: string
  reversed?: boolean
  className?: string
}

export default function IconText({ icon, text, reversed, className, ...props }: IconTextProps) {
  return (
    <div className={`icon-text ${className} ${reversed ? 'icon-text-reversed' : null}`} {...props}>
      <span className="icon-text-icon">{icon}</span>
      <span className="icon-text-text">{text}</span>
    </div>
  )
}

output:

[jmpolitzer]

@shilman Thanks for the response. It turns out that my issue revolved around components imported from an external library, which I found a fix for here. I believe this can be closed.