Why do “specific” component renders a more “generic” one?

Question

This is straight from reactjs site.

function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
    </FancyBorder>
  );
}

function WelcomeDialog() {
  return (
    <Dialog
      title="Welcome"
      message="Thank you for visiting our spacecraft!" />
  );
}

from Reactjs docs "In React, this is also achieved by composition, where a more “specific” component renders a more “generic” one and configures it with props:"

I find the statement bit confusing. Generally shouldn't more generic items create specific ones?