TestController in testCafe is not getting evaluated in PageObjectModel/PageComponent class

We are using TestCafe as test tool along with PageObjectModel as design. Our execution flow goes from test-> helpers->Pages->PageComponents

Following is the example code, Testcase code:

test('test desc' async t => {

ObjectHelper h = new ObjectHelper()
await h.method()
})

helper code :

import { t } from 'testcafe'
import { MyObjectPage } from '../pages/MyObjectPage'
import { MessagePopup } from '../pages/components/MessagePopup'

export class ObjectHelper {
    private obj:MyObjectPage = new MyObjectPage()
    
    public async saveStoryBoard () {
    await t.click(...)
    await obj.myPageMethods()
    ....      
}
}

Page code:

import {Selector, t } from 'testcafe'
import { PageComponent } from '..PATH...'

export Class MyPage{
    private pc1:PageComponent
    private pc2:PageComponent
    constructor(){
        this.pc1 = new PageComponent('idOfPageComponent2')
        tgis.pc2 = new PageComponent('idOfPageComponent1')
    }
    
    public async clickFirstComponent()
    {
        this.pc1.click()
    }
}

Component Code:

import {Selector, t } from 'testcafe'

export Class PageComponent{
    private widget1:Selector
    private widget2:Selector
    constructor(param){
        this.widget1 = Selector(..param..)
        tgis.widget2 = Selector(..param..)
    }
    
    public async click()
    {
        t.click(this.widget1)
        t.click(this.widget2)
    }
}

Here, we are expecting our flow to be executed correctly. Alas, we are getting the following error as,

"Cannot implicitly resolve the test run in the context of which the test controller action should be executed. Use test function's 't' argument instead"