Rendering data on specific calendar dates - antd

Question

Goal: display data in calendar on days specified by a datepicker.
Problem: I am unable to assign data to specific dates- all calendar dates display the same data.
The calendar component is rendered by passing a function to its dateCellRender prop which generates the content to be displayed in the cell. The function passed to dateCellRender accepts a moment object as its sole argument, which is generated by the datepicker form. I inspected the Moment object and everything looks good there, i.e. calling moment.date() returns a number.
I tried to mimic the pattern in the documentation, but I keep running into the same issue.
What I'm really confused about is where the filtering is supposed to happen and what's going on behind the scenes. Is dateCellRender being called for every single cell in the calendar and displaying content only when a conditional is met?
Thanks.
The documentation example Calendar displays the list data on 8th, 10th, and 15th of every month. I'm putting it here for convenience. My code is below.
function getListData(value) {
let listData;
switch (value.date()) {
case 8:
listData = [
{ type: 'warning', content: 'This is warning event.' },
{ type: 'normal', content: 'This is usual event.' },
]; break;
case 10:
listData = [
{ type: 'warning', content: 'This is warning event.' },
{ type: 'normal', content: 'This is usual event.' },
{ type: 'error', content: 'This is error event.' },
]; break;
case 15:
listData = [
{ type: 'warning', content: 'This is warning event' },
{ type: 'normal', content: 'This is very long usual event。。....' },
{ type: 'error', content: 'This is error event 1.' },
{ type: 'error', content: 'This is error event 2.' },
{ type: 'error', content: 'This is error event 3.' },
{ type: 'error', content: 'This is error event 4.' },
]; break;
default:
}
return listData || [];
}
function dateCellRender(value) {
const listData = getListData(value);
return (
<ul className="events">
{
listData.map(item => (
<li key={item.content}>
<span className={`event-${item.type}`}>●</span>
{item.content}
</li>
))
}
</ul>
);
}
ReactDOM.render(
<Calendar dateCellRender={dateCellRender} />
, mountNode);
My exploratory code. "test" is displayed on every day of every month when the 3rd is chosen from datepicker.
testDate = () => {
console.log("in testDate", moment.date());
if (moment.date() === 3) {
return "foo";
};
render() {
return <Calendar dateCellRender={this.testDate} />
}
I expect 'foo' to be displayed on the third of every month when moment.date() === 3, but it's displayed instead on every date.
There are no error messages.