How to create a background task with headless js in react native

When following the documentation here https://reactnative.dev/docs/headless-js-android and trying to create a simple background task, everything seems to work properly ( compilation and building is all good ) and when am trying to start the service i get this error:

(NOBRIDGE) ERROR Error: Failed to call into JavaScript module method AppRegistry.startHeadlessTask(). Module has not been registered as callable. Registered callable JavaScript modules (n = 8): GlobalPerformanceLogger, RCTNativeAppEventEmitter, SamplingProfiler, RCTDeviceEventEmitter, HMRClient, RCTLog, HeapCapture, Systrace. Did you forget to call `registerCallableModule`?

I have tried multiple times and i always end up with this problem, i can not find anything when trying to google this error and ChatGPT also suggest nonsense.

Here is my setup:

android/app/src/main/java/com/mycompany/MyTaskService.kt

package com.mycompany;

import android.content.Intent
import com.facebook.react.HeadlessJsTaskService
import com.facebook.react.bridge.Arguments
import com.facebook.react.jstasks.HeadlessJsTaskConfig

class MyTaskService : HeadlessJsTaskService() {
    override fun getTaskConfig(intent: Intent): HeadlessJsTaskConfig? {
        return intent.extras?.let {
            HeadlessJsTaskConfig(
                "MyTaskService",
                Arguments.fromBundle(it),
                5000, // timeout for the task
                true // optional: defines whether or not the task is allowed in foreground.
                // Default is false
            )
        }
    }
}

android/app/src/main/java/com/mycompany/MainActivity.kt

package com.mycompany

import android.content.Intent // Import for Intent
import android.os.Bundle // Import for Bundle
import com.facebook.react.ReactActivity
import com.facebook.react.ReactActivityDelegate
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
import com.facebook.react.defaults.DefaultReactActivityDelegate
import com.mycompany.MyTaskService

class MainActivity : ReactActivity() {
    override fun getMainComponentName(): String = "MyCompany"

    override fun createReactActivityDelegate(): ReactActivityDelegate =
        DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)

    override fun onStart() {
        super.onStart()

        val service = Intent(applicationContext, MyTaskService::class.java)
        val bundle = Bundle()

        bundle.putString("foo", "bar")

        service.putExtras(bundle)

        applicationContext.startForegroundService(service)
    }
}

(Note that here am trying to start the service when the app starts using the OnStart, i have also tried to start it with a button or when the app minimizes but i always end up at the same error)

Then, in the React Native side,

app.tsx

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React from 'react';
import type {PropsWithChildren} from 'react';
import {
    AppRegistry,
    SafeAreaView,
    ScrollView,
    StatusBar,
    StyleSheet,
    Text,
    useColorScheme,
    View,
} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
const STRAPI_URL = '...';

import {
  Colors,
} from 'react-native/Libraries/NewAppScreen';
import {HomeScreen} from "./src/HomeScreen.tsx";
import {createNativeStackNavigator} from "@react-navigation/native-stack";
import {AboutScreen} from "./src/AboutScreen.tsx";
import DestinationsScreen from "./src/DestinationsScreen.tsx";
import ContactScreen from "./src/ContactScreen.tsx";
import JourneyScreen from "./src/JourneyScreen.tsx";

const Stack = createNativeStackNavigator();

function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
      <NavigationContainer>
          <Stack.Navigator screenOptions={{headerShown: false}} initialRouteName="Home">
              ...
          </Stack.Navigator>
      </NavigationContainer>
  );
}

const styles = StyleSheet.create({
 ...
});

export default App;

const testTask = () => async () => {
    console.log('Background task test')
};

AppRegistry.registerComponent("MyCompany", () => App);
AppRegistry.registerHeadlessTask('MyTaskService', testTask);

Every time, no matter when am trying to start the service i get the error i mention above (also in the screenshot)

Please note that i set the allow in foreground to true, so i can start the service when the main app is running.

Also i have added this to my Manifest

<service android:name="com.mycompany.MyTaskService" />