How to get selected shipping address from js component in Magento 2?

I’m very new to the Magento world and I’m trying to figure out how do I get the currently selected shipping address in Magento 2.

The goal is to only display the selected shipping address in the checkout page and move
the shipping address list to a modal. I’ve tried to create a custom component by using the Magento_Checkout/js/view/shipping-address/list.js as the base example.

For testing purpose, I’v tried console.log-ing the getSelectedShippingAddress function from Magento_Checkout/js/checkout-data, but it always returns null. Is this not the right way to get the currently selected shipping address? If so, how is the right way to do it?

The following is my custom component. In short, I only add the dependency to checkout-data and a couple of console.log in the initialize function.

define([
'underscore',
'ko',
'mageUtils',
'uiComponent',
'uiLayout',
'Magento_Customer/js/model/address-list',
'Magento_Checkout/js/checkout-data',
], function (_, ko, utils, Component, layout, addressList, checkoutData) {
  'use strict';

  var defaultRendererTemplate = {
    parent: '${ $.$data.parentName }',
    name: '${ $.$data.name }',
    component: 'Magento_Checkout/js/view/shipping-address/address-renderer/default',
    provider: 'checkoutProvider'
  };

  return Component.extend({
    defaults: {
        template: 'Magento_Checkout/shipping-address/list',
        visible: addressList().length > 0,
        rendererTemplates: []
    },

    /** @inheritdoc */
    initialize: function () {
        this._super()
            .initChildren();

        console.log('checkout data', checkoutData);
        console.log('selected shipping address', checkoutData.getSelectedShippingAddress());
        addressList.subscribe(function (changes) {
                var self = this;

                changes.forEach(function (change) {
                    if (change.status === 'added') {
                        self.createRendererComponent(change.value, change.index);
                    }
                });
            },
            this,
            'arrayChange'
        );

        return this;
    },

    /** @inheritdoc */
    initConfig: function () {
        this._super();
        // the list of child components that are responsible for address rendering
        this.rendererComponents = [];

        return this;
    },

    /** @inheritdoc */
    initChildren: function () {
        _.each(addressList(), this.createRendererComponent, this);

        return this;
    },

    /**
     * Create new component that will render given address in the address list
     *
     * @param {Object} address
     * @param {*} index
     */
    createRendererComponent: function (address, index) {
        var rendererTemplate, templateData, rendererComponent;

        if (index in this.rendererComponents) {
            this.rendererComponents[index].address(address);
        } else {
            // rendererTemplates are provided via layout
            rendererTemplate = address.getType() != undefined && this.rendererTemplates[address.getType()] != undefined ? //eslint-disable-line
                utils.extend({}, defaultRendererTemplate, this.rendererTemplates[address.getType()]) :
                defaultRendererTemplate;
            templateData = {
                parentName: this.name,
                name: index
            };
            rendererComponent = utils.template(rendererTemplate, templateData);
            utils.extend(rendererComponent, {
                address: ko.observable(address)
            });
            layout([rendererComponent]);
            this.rendererComponents[index] = rendererComponent;
        }
    }
});