I have a problem understanding this interface

export interface StoryData<Content = StoryblokComponent<string> & { [index: string]: any }> {
  ...
  content: Content
  ...
}

This is the component type

export interface StoryblokComponent<TComp extends string> {
  _uid: string
  component: TComp
  _editable?: string
}

This is my dynamic component:

import { StoryData } from "storyblok-js-client";
import { components } from "../config/componentRegister";
export const DynamicComponent: React.FC<StoryData> = ({
  content,
}: StoryData) => {
  if (typeof components[content.component] !== "undefined") {
    const Component = components[content.component];

    return <Component content={content} />;
  }
  // fallback if the component doesn't exist
  return (
    <p>
      The component <strong>{content.component}</strong> has not been created
      yet.
    </p>
  );
};

My problem appears here:

export const Page: React.FC<StoryData> = ({
  content,
}: StoryData<StoryData>) => {
  let { grid } = content;
  return (
    <div {...sbEditable(content)}>
      {grid?.map((childContent) => (
        <DynamicComponent content={childContent} />
      ))}
    </div>
  );
};

Inside of content there can be more then just _uid: string component: TComp _editable?: string

There can be for exapmle size witch is an string. I can define the name of the key. It can also be an array of StoryData like grid: StoryData[] for example.

The error appears at the Props at my Page component

Type '({ content }: StoryData) => void' is not assignable to type 'FC<StoryData<StoryblokComponent<string> & { [index: string]: any; }>>'.
  Type 'void' is not assignable to type 'ReactElement<any, any>'.ts(2322)

How do i fix this error?