How can I pass props to inner React component using functional approach

I am using react with the following functional approach

const Divider: React.FunctionComponent = (props: CardDividerProps) => (
   <div>
      divider
   </div>
);

const Card: React.FunctionComponent = (props: CardProps) => {
 const color = props.color

 return(
   <div>
      card
   </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 />