How to get Current Confluence Page ID using Forge Custom UI

Am trying to get current confluence Page ID forge custom ui but the page ID variable in the console.log('Get Current confluence Page Id: ’ +pageId); at backend says pageId is undefined

here is the front end app.js file

import React, { useEffect, useState } from 'react';
import {requestConfluence, invoke } from '@forge/bridge';

function App() {
  const [data, setData] = useState(null);
  useEffect(() => {
    invoke('getText', { example: 'my-invoke-variable' }).then(setData);

  }, []);

  return (
{data ? data : 'Loading...'}

export default App;

here is the backend index.js file

import Resolver from '@forge/resolver';
import { useProductContext } from "@forge/ui";

const resolver = new Resolver();

resolver.define('getText', (req) => {
// console.log(req);

// Get the current context (e.g., Confluence page ID)
  const context = useProductContext();
  const pageId = context.contentId;
  console.log('Get Current confluence Page Id: ' +pageId);

  return (JSON.stringify(pageId));

export const handler = resolver.getDefinitions();

Here is the permission scopes i set at manifest

    - storage:app
    - write:confluence-content
    - write:label:confluence
    - read:page:confluence

Please what is wrong with my code

Hi EsedoFredrick

useProductContext can’t be used in custom UI. The context can be retrieved in the frontend via view.getContext() or from a resolver like

resolver.define("exampleFunctionKey", ({ payload, context }) => { 
  // do something with context here 
  return { example: `Hello, ${}!` };