我不是100%确定该怎么问这个问题。
我正在编写一个教程，目前正在构建几个组件。
我的组件文件夹中有一个名为LoadingComponent的文件夹，其中有一个名为index.tsx的文件，我收到以下错误：

以下是整个文件：

import React from 'react';
import { Card, CardBody } from 'reactstrap';
import CenterPiece from '../CenterPiece';

export interface ILoadingProps {
    dotType?: string;
    children: string;
}

export const Loading: React.FunctionComponent<ILoadingProps> = (props) => {
    const { children, dotType } = props;

    return (
        <div className="text-center">
            <div className="stage">
                <div className={dotType} />
            </div>
            {children}
        </div>
    );
};

Loading.defaultProps = {
    dotType: 'dot-bricks'
};

export interface ILoadingComponentProps {
    card?: boolean;
    dotType?: string;
    children: string;
}

export const LoadingComponent: React.FunctionComponent<ILoadingComponentProps> = (props) => {
    const { card, children, dotType } = props;

    if (card) {
        return (
            <CenterPiece> <-- **** error pointing here ***
                <Card>
                    <CardBody>
                        <Loading dotType={dotType}>{children}</Loading>
                    </CardBody>
                </Card>
            </CenterPiece>
        );
    }

    return <Loading dotType={dotType}>{children}</Loading>;
};

LoadingComponent.defaultProps = {
    card: true,
    dotType: 'dot-bricks'
};

export default LoadingComponent;

上面的文件从组件中的另一个名为CenterPiece的文件夹导入，并有一个名为index.tsx文件的文件。下面是该文件：

import React from 'react';
import { Container } from 'reactstrap';

export interface ICenterPieceProps {
  children: string;  <-- **** I think this is the issue ****
}

const CenterPiece: React.FunctionComponent<ICenterPieceProps> = (props) => {
  const { children } = props;

  return (
    <Container fluid className="p-0">
      <Container
        style={{
          position: 'absolute',
          left: '50%',
          top: '50%',
          transform: 'translate(-50%, -50%)',
          WebkitTransform: 'translate(-50%, -50%)'
        }}
        className="d-flex justify-content-center"
      />
        {children}
    </Container>
  );
};

export default CenterPiece;

我不是我做错了什么。本教程没有指定ICenterPieceProp需要多个子项。
我能做些什么来解决这个问题？