Selector cannot find Test Controller

I need to pass the test controller to my Selector. I am new to both Typescript and Testcafe. Below are my files:

Locator.ts :

import {Selector, t} from 'testcafe';

export default class Locators {
    elementWithId(id: string) {
        const element = Selector(id => {
            return document.getElementById(id);
        }, {
            boundTestRun: t
        });
        const boundelement = element(id)
        return boundelement      
    };


};

LoginFlow.ts:

import {t} from 'testcafe';
import Locators from './Locators';

const locate = new Locators()

export default class LoginFlow {
    loginEmail : any;
    loginPassword: any;
    loginButton: any;
    searchBar: any;

    constructor(){
        this.loginEmail = locate.elementWithId('email'); 
        this.loginPassword = locate.elementWithId('password');
        this.loginButton = locate.elementWithId('login');
        this.searchBar = locate.elementWithId('searchinput');
    }

    async loginDispatch() {
        await t
        .setPageLoadTimeout(10000)  // 5 seconds
        .typeText(this.loginEmail, 'email')
        .typeText(this.loginPassword, 'password')
        .click(this.loginButton)
        .expect(this.searchBar)
        .ok()
    }
}

Test.ts:

import {t} from 'testcafe';
import LoginFlow from "./PageObjects/LoginFlow";

const lf = new LoginFlow()
fixture('First UI Test')
    .page('<page_url>');

test("Get Social Compose Page", async (t) => {

    await lf.loginDispatch()

});

The error I am currently getting is : The "boundTestRun" option value is expected to be a test controller.

I have tried to use .with({boundTestRun: t}) where i declare boundelement in Locators.ts but that complains that element(id) is not a function.