Making package with React + TS + Storybook + Rollup problems

I'm making my own design system with React + Typescript + Storybook + Rollup.

Before publishing my lib to NPM, I wanted to test this lib in my local env.

I built my project and install like npm i ../my_lib.

I wanted to import my Button component, so I wrote a Login page.

import React from "react";
import { Button } from "@myLib/ui/src";

const Login = () => {
  return (
    <div>
      <Button>Hello</Button>
    </div>
  );
};

export default Login;

In VSCode, there's no error.

But I started my dev server, this message occured.

Module parse failed: Unexpected token (1:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> export interface IconProps {
|   size?: number;
|   fillColor?: string;

I think the rollup.config.js has problem. I tried many cases, but only interface got error.

Here is my rollup.config.js.

import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import typescript from 'rollup-plugin-typescript2';
import pkg from './package.json';
import svgr from '@svgr/rollup';
import url from 'rollup-plugin-url';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';

const extensions = ['.js', '.jsx', '.ts', '.tsx'];

process.env.BABEL_ENV = 'production';

export default {
  input: './src/index.ts',
  plugins: [
    peerDepsExternal(),
    resolve({ extensions }),
    commonjs({
      include: 'node_modules/**',
    }),
    typescript({ useTsconfigDeclarationDir: true }),
    babel({ extensions, include: ['src/**/*'], runtimeHelpers: true }),
    url(),
    svgr(),
  ],
  output: [
    {
      file: pkg.main,
      format: 'es',
    },
  ],
};

Is there any wrong field in my config file?