Nivo Calander Axis Color not changing

Question

I'm working with the Nivo ResponsiveCalendar component in a React application and attempting to customize the text color for both the axis ticks and legend using a theme object. While I've successfully changed the tooltip styles, my attempts to modify the axis and legend text color aren't applying, though the same approach works fine with ResponsiveLine.

Here's a snippet of my component setup:

import React from 'react';
import { ResponsiveCalendar } from '@nivo/calendar';
export default function HeatMap() {
  const theme = {
    tooltip: {
      container: {
        background: '#000',
        color: '#38b2ac',
        fontSize: '24px',
      },
    },
    axis: {
      ticks: {
        text: {
          fill: '#38b2ac', // Intended Teal color for the axis ticks text
        },
      },
      legend: {
        text: {
          fill: '#38b2ac', // Intended Teal color for the axis legend text
        },
      },
    },
  };
  return (
    <ResponsiveCalendar
      data={data.filter((d) => d.day.startsWith(`${currentYear}-`))}
      from={`${currentYear}-01-01`}
      to={`${currentYear}-12-31`}
      emptyColor="#E6FFFA"
      colors={['#B2F5EA', '#81E6D9', '#4FD1C5', '#38B2AC']}
      margin={{ top: 10, right: 40, bottom: 0, left: 40 }}
      yearSpacing={40}
      monthBorderColor="#ffffff"
      dayBorderWidth={2}
      dayBorderColor="#ffffff"
      theme={theme}
      legends={[
        {
          anchor: 'bottom-right',
          direction: 'row',
          translateY: 36,
          itemCount: 4,
          itemWidth: 42,
          itemHeight: 36,
          itemsSpacing: 14,
          itemDirection: 'right-to-left',
        },
      ]}
    />
  );
}