I am using react with the following functional approach

const Divider: React.FunctionComponent = ({children}) => (
   <div>
      // I want to use color props here of Card
      divider
      {children}
   </div>
);

const Card: React.FunctionComponent = ({children, color}) => {
 const color = props.color

 return(
   <div>
      card
      {children}
   </div>
 )}

Card.Divider = Divider;

and I call these components as following

<Card color="red">
 <Card.Divider>
  Any text
 <Card.Divider/>
<Card />

The problem is: How can I get the color props in the Divider component

PS: I don't want to repeat props passing again for divider like following

<Card color="red">
 <Card.Divider color="red">
  Any text
 <Card.Divider/>
<Card />

What I want is the following approach and can still able to use color props in Divider component, how can I do that

<Card color="red">
 <Card.Divider>
  Any text
 <Card.Divider/>
<Card />