Interface imported from another file not show as control storybook

Question

Im starting to explore storybook recently and had a problem with controls. At first this way is work with storybook to get the component props show up as control

interface IInput {
  type?: 'text' | 'number' | 'password';
  name: string;
  placeholder?: string;
  value?: string;
  // ...
}

const Input = ({ field, form, ...props }: IInput) => {
  // ...
}

but when I try this way the control doesn't show since I would like to use the interface in other place too

import { IInput } from '@models/components/input';

const Input = ({ field, form, ...props }: IInput) => {
  // ...
}

I already try to import it this way but still not work

import { IInput } from '../../../models/components/input';

here is my preview.ts, main.ts in case its needed

preview.ts

import type { Preview } from '@storybook/react';

const preview: Preview = {
  parameters: {
    backgrounds: {
      default: 'light'
    },
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/
      }
    }
  }
};

export default preview;

main.ts

import type { StorybookConfig } from '@storybook/nextjs';
const config: StorybookConfig = {
  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions'
  ],
  framework: {
    name: '@storybook/nextjs',
    options: {}
  },
  docs: {
    autodocs: 'tag'
  }
};
export default config;

Would love to hear any approach!