diff --git a/src/story.test.ts b/src/story.test.ts
index f7c2de4..20b9e8b 100644
--- a/src/story.test.ts
+++ b/src/story.test.ts
@@ -3,7 +3,6 @@
 /* global HTMLElement */
 import { expectTypeOf } from 'expect-type';
 import {
-  Renderer,
   Args,
   ArgsFromMeta,
   ArgsStoryFn,
@@ -11,6 +10,7 @@ import {
   DecoratorFunction,
   LoaderFunction,
   ProjectAnnotations,
+  Renderer,
   StoryAnnotationsOrFn,
   StrictArgs,
 } from './story.js';
@@ -34,6 +34,8 @@ type ButtonArgs = {
 
 const Button = (props: ButtonArgs) => 'Button';
 
+const ButtonIcon = ({ icon }: { icon: string }) => `ButtonIcon ${icon}`;
+
 let a = 1;
 async function doSomething() {
   a = 2;
@@ -118,6 +120,22 @@ CSF1Story.story = {
   args: { a: 1 },
 };
 
+const simpleWithSubComponents: XMeta = {
+  title: 'simple',
+  component: Button,
+  tags: ['foo', 'bar'],
+  decorators: [(storyFn, context) => `withDecorator(${storyFn(context)})`],
+  parameters: { a: () => null, b: NaN, c: Symbol('symbol') },
+  loaders: [() => Promise.resolve({ d: '3' })],
+  async beforeEach() {
+    await doSomething();
+    return cleanup;
+  },
+  args: { x: '1' },
+  argTypes: { x: { type: { name: 'string' } } },
+  subcomponents: { ButtonIcon }, // the fact that this line does not cause a Typescript compilation error itself means that the type is correct
+};
+
 const CSF2Story: XStory = () => 'Named Story';
 CSF2Story.storyName = 'Another name for story';
 CSF2Story.tags = ['foo', 'bar'];
diff --git a/src/story.ts b/src/story.ts
index 2596758..7797094 100644
--- a/src/story.ts
+++ b/src/story.ts
@@ -538,7 +538,7 @@ export interface ComponentAnnotations<TRenderer extends Renderer = Renderer, TAr
    *
    * By defining them each component will have its tab in the args table.
    */
-  subcomponents?: Record<string, TRenderer['component']>;
+  subcomponents?: Record<string, (TRenderer & { T: any })['component']>;
 
   /**
    * Function that is executed after the story is rendered.