Type '(args: any) => Element' has no properties in common with type Story

I'm building a React library using Typescript and Storybook. The component works fine when compilied and imported, but in the compiling process, the *.stories.tsx files fail. Here are the corresponding files:

Button.tsx

import React, {forwardRef, useEffect, useImperativeHandle, useState} from 'react'
import ButtonPropTypes from './ButtonPropTypes'


const Button = forwardRef((props: InferProps<typeof ButtonPropTypes>, buttonRef) => {...}

ButtonPropTypes.ts

import PropTypes from 'prop-types'

export default {
  to: PropTypes.string,
  label: PropTypes.any,
  children: PropTypes.any,
  disabled: PropTypes.bool,
  loading: PropTypes.bool,
  onClick: PropTypes.func,
  state: PropTypes.object,
  type: PropTypes.string.isRequired,
  use: PropTypes.string.isRequired
}

I omitted a few proptypes for simplicity.

Button.stories.tsx

import React from 'react'
import {Story, ComponentMeta} from '@storybook/react'
import Button from './Button'
import ButtonPropTypes from './ButtonPropTypes'
import {InferProps} from 'prop-types'

type ButtonPropsInterface = InferProps<typeof ButtonPropTypes>

export default {
  title: 'RecylinkReactComponents/Button',
  component: Button
} as ComponentMeta<typeof Button>

const Template: Story<ButtonPropsInterface> = args => <Button {...args} /> 
// This line causes the first error: Type '(args: any) => Element' has no properties 
// in common with type 'Story<ButtonPropsInterface>'

export const TestButton = Template.bind({})
// Also this line:  Property 'bind' does not exist on type 'Story<ButtonPropsInterface>'
TestButton.args = {
  label: 'Label',
  onClick: () => console.log('Clicked'),
  type: 'button',
  use: 'function'
}

rollup.config.js

import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import typescript from '@rollup/plugin-typescript'
import postcss from 'rollup-plugin-postcss'
import dts from 'rollup-plugin-dts'

import {terser} from 'rollup-plugin-terser'
import peerDepsExternal from 'rollup-plugin-peer-deps-external'

const packageJson = require('./package.json')

export default [
  {
    input: 'src/index.ts',
    output: [
      {
        file: packageJson.main,
        format: 'cjs',
        sourcemap: true
      },
      {
        file: packageJson.module,
        format: 'esm',
        sourcemap: true
      }
    ],
    plugins: [
      peerDepsExternal(),
      resolve(),
      commonjs(),
      typescript({
        tsconfig: './tsconfig.json',
        exclude: [
          /\.test.((js|jsx|ts|tsx))$/,
          /\.stories.((js|jsx|ts|tsx|mdx))$/
        ]
      }),
      postcss(),
      terser()
    ],
    context: 'window'
  },
  {
    input: 'dist/esm/index.d.ts',
    output: [{file: 'dist/index.d.ts', format: 'esm'}],
    plugins: [dts()],
    external: [/\.css$/],
    context: 'window'
  }
]

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,

    "jsx": "react",
    "module": "ESNext",
    "declaration": true,
    "declarationDir": "types",
    "sourceMap": true,
    "outDir": "dist",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "emitDeclarationOnly": true,
    "allowJs": true,
    "noImplicitAny": false
  }
}

And the .storybook/main.js file

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions"
  ],
  "framework": "@storybook/react",
  "core": {
    "builder": "@storybook/builder-webpack5"
  }
}