How can I correctly render an OWL component using t-component in an Odoo view template? Am I missing something in the setup or registration?

I am trying to render an OWL component in Odoo using t-component within my view template. However, the component is not loading, and nothing appears on the page.

Here’s what I’ve done:

1.My OWL Component:

/** @odoo-module **/

import { Component } from "@odoo/owl";

export class ProductImageGallery extends Component {
    setup() {
        console.log("ProductImageGallery component is working");
    }
}
ProductImageGallery.template = "multi_image_master.ProductImageGalleryTemplate";

2.My Component Template:

<template id="ProductImageGalleryTemplate" name="Product Image Gallery">
    <div>
        <h3>Product Image Gallery</h3>
        <p>Gallery of images for this product will appear here.</p>
    </div>
</template>

views/xml file

This is supposed to render the component using t-component:

<template id="ProductPageTemplate" name="Product Page">
    <t t-call="website.layout">
        <div id="product-page-content" class="container">
            <t t-component="multi_image_master.ProductImageGallery"/>
            <p>Hello Bharathi</p>
        </div>
    </t>
</template>

Controller:
The page is loaded via this controller.

from odoo import http
from odoo.http import request

class ControllerProductPage(http.Controller):
    @http.route('/shop', type='http', auth='public', website=True, csrf=False)
    def renderProductPage(self, **kwargs):
        return request.render('multi_image_master.ProductPageTemplate', {})

manifest file

   {
    "name": "Product Multi-Image Manager",
    "version": "0.1",
    "category": "Product",
    "depends": ["website"],
    "data": [
        "views/product_template.xml"
    ],
    "assets": {
        "web.assets_backend": [
            "multi_image_master/static/src/js/product_image_gallery.js",
            "multi_image_master/static/src/xml/product_image_gallery.xml"
        ]
    },
    "installable": True,
    "application": True,
    "license": "LGPL-3"
}

Issue:
When I load the /shop route, the page renders the static content but does not render the component (t-component=”multi_image_master.ProductImageGallery”). Also, the console.log() in the setup method of the component does not execute, indicating that the component is not being loaded.

Any guidance would be appreciated.