Symfony 3.4 LiipThemeBundle loads desktop template for phone

Question

I have installed Liip Theme Bundle on my Symfony 3.4.47 project. Its directory structure has the mobile template that should be loaded for mobile devices (Resources/themes/phone/) and the Symfony default desktop version (Resources/views/).

The said directory structure worked for Symfony 2.1 but it does not work properly in Symfony 3.4. However I have figured out that it recognizes which theme to load depending on the display size but it displays the default desktop version (Resources/views/) for both desktop and mobile displays instead of showing (Resources/themes/phone/) for mobile explicitly. How can I fix this issue? Shown below is the directory structure and content in files related to Liip Theme Bundle installation.

Symfony directory structure

src/
    AppBundle/
        Resources/
            views/
                Home/
                    index.html.twig
                layout.html.twig
            themes/
                phone/
                    Home/
                       index.html.twig
                    layout.html.twig

app/AppKernel.php

public function registerBundles() {
    $bundles = [
        ...
        new Liip\ThemeBundle\LiipThemeBundle(),
        ...
    ];

app/config/config.yml

liip_theme:
    themes: ['web', 'phone']
    autodetect_theme: true
    load_controllers: true
    cookie:
        name: LoadEVTheme
        lifetime: 3600
        path: /
        domain: ~
        secure: false
        http_only: false
    

Resources/views/Home/index.html.twig and Resources/views/themes/phone/Home/index.html.twig

{% extends '@App//layout.html.twig' %}