MyComponent.jsx

import * as React from 'react';
import {Greeting, greetingProps} from './Greeting';
import {Header, headerProps} from './Header';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import {myComponent} from './MyComponent.scss';

export const MyComponent = (props) => {
  const {
    HeaderProps,
    GreetingProps
    className,
    children,
    ...otherProps
  } = props;
  
  return  (
    <section
      {...otherProps}
      className={classnames(className, myComponent)}
    >
      <Header {...HeaderProps}/>
      <Greeting {...GreetingProps}/>
      {children}
    </section>
  );
}

MyComponent.propTypes = {
  HeaderProps: headerProps,
  GreetingProps: greetingProps,
  className: PropTypes.string.isRequired,
  children: PrpoTypes.node
};