Hi I am trying to use public owl component from one module to another. my use case is I have to call it in same module as well and to another module too. Calling in the same module is working fine but other module isnt taking the props to call jsonrpc. Below is the code base for my component and where I am calling it.

Public owl js file

/* @odoo-module */

import {Component, onMounted, onWillStart, useRef, useState, useSubEnv} from "@odoo/owl";
import {registry} from "@web/core/registry"
import {jsonrpc} from "@web/core/network/rpc_service";



export class HomePlans extends Component {
    static template = "franchisor_theme.home_plan_template";

    setup() {
        onWillStart(this._onWIllStart.bind(this))
        this.imageDataUri = this.imageDataUri.bind(this);
        console.log(this.props.data, this.props, 'this is not logging in console!')
        this.state = useState({'home_plans': this.props.home_plans, 'partner': this.props.partner, 'community': this.props.community, FILETYPE_BASE64_MAGICWORD: {
                '/': 'jpeg',
                'i': 'png',
                'R': 'gif',
                'U': 'webp',
                'Q': 'svg+xml'
            }})
    }
    imageDataUri(base64Source) {
    const mimeType = this.state.FILETYPE_BASE64_MAGICWORD[base64Source?.charAt(0)] || 'png';

    return `data:image/${mimeType};base64,${base64Source}`;
    }
    async _onWIllStart() {
//    console.log(this.state)
    let params = {
    community_slug: this.state.community ?? "",
    partner_id: this.state.partner.id
};


    try {
        let communities = await jsonrpc("/get/partners/plans", params)
        this.state.home_plans = communities
    }catch(error){
        console.error("Error Fetching Home Plans! ", error)
        }

    }



    async _onMounted() {
    }


}


registry.category("public_components").add("HomePlans", HomePlans);
Below is my js file where renderToElement is called:
/* @odoo-module */


import {Overlay} from "./overlay";
import {renderToElement} from "@web/core/utils/render";

export class ShapBase {
    static component = {}

    setup(GoogleMap, data) {
        this.googleMap = GoogleMap
        this.map = this.googleMap.map
    }

    openPreview() {
        if (!this.preview) {
            return
        }
            this.data.home_plans = {
            name: "jkjk"
            }
            content = renderToElement('bista_map_component.lot_preview', {data: this.data})
            
        

    }



}
lot_preview.xml
<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
   <t t-name="bista_map_component.lot_preview">
       <div>

       <!--                    below is for status: Available-->
                    <section t-if="data.status_name == 'Available'" style="margin-top: 5rem; margin-right: 7px; margin-left: 7px;">
                    
                        <div class="container mt-4">
                            <div class="row public_component">
                                <div t-esc="data.home_plans.name" />
                                <owl-component name="HomePlans" t-att-props="data.home_plans"/>
                            </div>
                        </div>
                       
                    </section>
       </div>
    </t>
</templates>
But props are not being sent. Either its not reading it as a component or im just not passing props in the right way