How to pass an Apex-Defined Collection Variable from apex action in flow to a screen component (LWC) in Flows?

Question

I have been working a small requirements where I need to display the Count of all Accounts Group by CreatedDate for Calendar Year. I have created an apex action 'FetchAccountData' as below

    public class ResultWrapper {
        @InvocableVariable
        public String year;
        
        @InvocableVariable
        public Integer count;
    }

    @InvocableMethod(label='Fetch Account Data')
    public static List<List<ResultWrapper>> getAccounts() {
        List<List<ResultWrapper>> results = new List<List<ResultWrapper>>();
        
        // Check if the current user has read access to the Account object
        if (!Schema.sObjectType.Account.isAccessible()) {
            return results;
        }

        List<ResultWrapper> wrappers = new List<ResultWrapper>();
        
        // Proceed with the query since we've checked for access
        for(AggregateResult ar : [SELECT CALENDAR_YEAR(CreatedDate) Year, COUNT(Id) RecordCount FROM Account GROUP BY CALENDAR_YEAR(CreatedDate)]) {
            ResultWrapper wrapper = new ResultWrapper();
            wrapper.year = String.valueOf(ar.get('Year')); // Convert year to String
            wrapper.count = (Integer)ar.get('RecordCount');
            wrappers.add(wrapper);
        }
        
        results.add(wrappers);
        return results;
    }
}

Now, I'm trying to display this data in LWC, but Apex-defined variable is not showing up in the property exposed in UI. Can someone tell me what am I doing wrong?

Here's the LWC code

ShowAccountData.html


<template>
    <template for:each={accounts} for:item="account">
        <div key={account.name}>
            {account.name} - {account.phone}
        </div>
    </template>
</template>


ShowAccountData.js 


import { LightningElement, api, track } from 'lwc';

export default class ShowAccountData extends LightningElement {
    @track accounts = [];

    // Expecting the data to be passed as a serialized JSON string
    @api
    set accountData(value) {
        if (value) {
            this.accounts = JSON.parse(value);
        }
    }

    get accountData() {
        return JSON.stringify(this.accounts);
    }

}

ShowAccountData.js-meta.xml


<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>59.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__FlowScreen</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">
            <property name="accountData" label="Account Data" type="String[]" />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>