Magento 2 – How to Add New Action to Existing Module with Routing

I am trying to add a new action to the existing module Magento_Customer.

My module has the following namespace Custom_AccountReferral

I need to add a new action customer/account/referral/

I have create a custom module and it works.

1. Create a new controller inside my module directory AccountReferral/Controller/Account the file with name Referral.php
2. Create the routes.xml file inside etc/frontend/ directory

With the following content

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="standard">
        <route id="customer" frontName="customer">
            <module name="Custom_AccountReferral" before="Magento_Customer"/>
        </route>
    </router>
</config>

3. Also tried to add the following line to the di.xml file

   preference for="Magento\Customer\Controller\Account\Referral" type="Custom\AccountReferral\Controller\Account\Referral"/>

But unfortunately it still gives me the 404 page

Whoops, our bad...

Please suggest how to add a new action to existing module routes.

Thanks.

UPDATE

The content of the Referral file

namespace Custom\AccountReferral\Controller\Account;
class Referral extends \Magento\Customer\Controller\AbstractAccount {

    protected $customerRepository;

    protected $dataObjectHelper;
    protected $session;

    protected $resultPageFactory;
    public function __construct(
        Context $context,
        Session $customerSession,
        PageFactory $resultPageFactory,
        CustomerRepositoryInterface $customerRepository,
        DataObjectHelper $dataObjectHelper
    ) {
        $this->session            = $customerSession;
        $this->resultPageFactory  = $resultPageFactory;
        $this->customerRepository = $customerRepository;
        $this->dataObjectHelper   = $dataObjectHelper;
        parent::__construct( $context );
    }

    public function execute() {
        $resultPage = $this->resultPageFactory->create();

        $block = $resultPage->getLayout()->getBlock( 'customer_account_dashboard_referral_edit' );
        if ( $block ) {
            $block->setRefererUrl( $this->_redirect->getRefererUrl() );
        }

        $data               = $this->session->getCustomerFormData( true );
        $customerId         = $this->session->getCustomerId();
        $customerDataObject = $this->customerRepository->getById( $customerId );
        if ( ! empty( $data ) ) {
            $this->dataObjectHelper->populateWithArray(
                $customerDataObject,
                $data,
                \Magento\Customer\Api\Data\CustomerInterface::class
            );
        }
        $resultPage->getConfig()->getTitle()->set( __( 'Referral Settings' ) );

        return $resultPage;
    }
}

This is just an example, I haven't added any logic yet, because it is not accessible.