Custom Element override not working

[nsantini]

I have a markdown text:

Based on the provided data and analysis, here is the cash flow forecast for the next 12 months, assuming a 1% growth in revenue and flat costs:


<Table
  columns={[{"title":"Month","dataIndex":"Month","key":"Month"},{"title":"Forecasted Revenue","dataIndex":"Forecasted Revenue","key":"Forecasted Revenue"},{"title":"Forecasted Expenses","dataIndex":"Forecasted Expenses","key":"Forecasted Expenses"}]}
  dataSource={[{"Month":"2024-09-01","Forecasted Revenue":"$3,137,678.85","Forecasted Expenses":"$2,036,660.28","key":0},{"Month":"2024-10-01","Forecasted Revenue":"$3,169,055.64","Forecasted Expenses":"$2,036,660.28","key":1},{"Month":"2024-11-01","Forecasted Revenue":"$3,200,746.19","Forecasted Expenses":"$2,036,660.28","key":2},{"Month":"2024-12-01","Forecasted Revenue":"$3,232,753.66","Forecasted Expenses":"$2,036,660.28","key":3},{"Month":"2025-01-01","Forecasted Revenue":"$3,265,081.19","Forecasted Expenses":"$2,036,660.28","key":4},{"Month":"2025-02-01","Forecasted Revenue":"$3,297,732.01","Forecasted Expenses":"$2,036,660.28","key":5},{"Month":"2025-03-01","Forecasted Revenue":"$3,330,709.33","Forecasted Expenses":"$2,036,660.28","key":6},{"Month":"2025-04-01","Forecasted Revenue":"$3,364,016.42","Forecasted Expenses":"$2,036,660.28","key":7},{"Month":"2025-05-01","Forecasted Revenue":"$3,397,656.58","Forecasted Expenses":"$2,036,660.28","key":8},{"Month":"2025-06-01","Forecasted Revenue":"$3,431,633.15","Forecasted Expenses":"$2,036,660.28","key":9},{"Month":"2025-07-01","Forecasted Revenue":"$3,465,949.48","Forecasted Expenses":"$2,036,660.28","key":10},{"Month":"2025-08-01","Forecasted Revenue":"$3,500,608.97","Forecasted Expenses":"$2,036,660.28","key":11}]}
/>
  
This forecast assumes a steady 1% growth in revenue each month while keeping the expenses constant.

And I have my component configured like so:

<Markdown
        children={markdownText}
        options={{
          overrides: {
            a: {
              component: Links,
            },
            Table: {
              component: ({ children, ...props }) => <Table {...props} />,
            },
          },
        }}
      />

The anchor components are working well. But the Table component just gets rendered as a string