Why is react-calendar-timeline ignoring child component?

Question

I have a custom react-calendar-timeline component. It looks something like this:

import Timeline, { TimelineHeaders } from 'react-calendar-timeline';

const CustomTimeline = () => {
  return (
      <Timeline 
        // props...
      >
        <TimelineHeaders>
          // My custom timeline headers...
        </TimelineHeaders>
      </Timeline>
  );
};

I want to move TimelineHeaders into a new component so that I can reduce the amount of code in the CustomTimeline component and add some custom styles. This was my attempt using styled-components:

import { TimelineHeaders } from 'react-calendar-timeline';
import styled from 'styled-components';

const StyledTimelineHeaders = styled(TimelineHeaders)`
  // custom styles here
`;

const CustomTimelineHeaders = ({ ...props }) => {
  return (
    <StyledTimelineHeaders {...props}>
      // custom headers here
    </StyledTimelineHeaders>
  );
};

And of course, the original timeline would now look like this:

import Timeline from 'react-calendar-timeline';
import CustomTimelineHeaders from './CustomTimelineHeaders';

const CustomTimeline = () => {
  return (
      <Timeline 
        // props...
      >
        <CustomTimelineHeaders />
      </Timeline>
  );
};

My problem is that the Timeline does not seem to recognize the TimelineHeaders as a child when I use the custom component. Rather than using my custom styles, it goes back to the default headers and completely ignores the custom component. Can anyone explain why?