Product context is missing localId or contentId required for the useContentProperty hook

Confluence Development
1

I am having trouble with app I am working which will take input from the user in a modalDialog and save it to the content of the page.

here is my code:

import ForgeUI, { render, 
  Fragment, 
  Macro, 
  Text, 
  ModalDialog, 
  useState,
  Heading,
  Form, 
  Button, 
  TextField
} from "@forge/ui";

/*imports the useContentProperty to save data to the page's content.
Must have @forge/ui-confluence package installed and 'permissions:
  scopes:
    - read:confluence-props
    - write:confluence-props added to manifest.yml'*/
import { useContentProperty } from '@forge/ui-confluence';

const App = () => {
  
  const [isOpen, setOpen] = useState(false);
  
  //defines variables for content and saves them to the page's content properties
  let [projectTitle, setProjectTitle] = useContentProperty('projectTitle', 0);
  let [bsa, setBsa] = useContentProperty('bsa', '');
  let [poc, setPoc] = useContentProperty('poc', '');
  let [highLevelObjective, setHighLevelObjective] = useContentProperty('highLevelObjective', '');
  let [currentProcessDescription, setCurrentProcessDescription] = useContentProperty('currentProcessDescription', '');
  let [futureProcessDescription, setFutureProcessDescription] = useContentProperty('futureProcessDescription', '');

  return (
    <Fragment>
      <Text>Project Title: {projectTitle}</Text>
      <Text>Business Systems Analyst: {bsa}</Text>
      <Text>Primary Point of Contact: {poc}</Text>
      <button
        text={'Edit'}
        onClick={() => setOpen(true)}
      />
      {isOpen && (
        <ModalDialog header="Edit Project Info" onClose={() => setOpen(false)}>
          <Form
            onSubmit={async (data) => {
              await setProjectTitle(data.projectTitle)
              await setBsa(data.bsa)
              await setPoc(data.poc)
              setOpen(false);
            }}
          >
           <TextField label="Project Title" name="projectTitle" />
           <TextField label="Business Systes Analyst" name="bsa" />
           <TextField label="Primary Point of Contact" name="poc"/>
          </Form>
        </ModalDialog>
      )

      }
    </Fragment>
  );
};

export const run = render(
  <Macro
    app={<App />}
  />
);

This is the error I am getting:

There was an error invoking the function - product context is missing localId or contentId required for the useContentProperty hook
{}

Error: product context is missing localId or contentId required for the useContentProperty hook
{}
    at useContentPropertyWithRequest (index.js:35571:15)
    at useContentProperty (index.js:35551:117)
    at Object.App [as type] (index.js:42239:113)
    at index.js:31570:36
    at async asyncMap (index.js:31505:24)
    at async index.js:31526:29
    at async asyncMap (index.js:31505:24)
    at async index.js:31588:23
    at async index.js:30916:31

This app is real similar to a math app I put together which works just fine. I cannot figure out what the difference is. Here is the code for the app that works:

import ForgeUI, { render, 
  Fragment, 
  Macro, 
  Text, 
  ModalDialog, 
  useState,
  Heading,
  Form, 
  Button, 
  TextField
} from "@forge/ui";

/*imports the useContentProperty to save data to the page's content.
Must have @forge/confluence-ui package installed*/
import { useContentProperty } from '@forge/ui-confluence';

//Main Application
const App = () => {
  const [isOpen, setOpen] = useState(false);
  //defines x and y variables and saves them to the page's content properties
  let [x, setX] = useContentProperty('x', 0);
  let [y, setY] = useContentProperty('y', 0);
  
  //Math Operations
  const addition = Number(x) + Number(y);
  const subtraction = Number(x) - Number(y);
  const division = Number(x) / Number(y);
  const multiplication = Number(x) * Number(y);

  return (
    <Fragment>
      <Heading size="medium">Variables</Heading>
      <Text>x = {x}</Text>
      <Text>y = {y}</Text>
      <Button
        text={`Edit`}
        onClick={() => setOpen(true)}
      />
      {isOpen && (
        <ModalDialog header="Edit Math Variables" onClose={() => setOpen(false)}>
          <Form
            onSubmit={async (data) => {
              await setX(data.x)
              await setY(data.y)
              setOpen(false);
            }}
          >
           <TextField label="x =" name="x" type="number" description="Enter the value of 'x'" />
           <TextField label="y =" name="y" type="number" description="Enter the value of 'y'" />
          </Form>
        </ModalDialog>
      )}
      <Heading size="medium">Addition</Heading>
      <Text>{x} + {y} = {addition}</Text>
      <Heading size="medium">Subtraction</Heading>
      <Text>{x} - {y} = {subtraction}</Text>
      <Heading size="medium">Division</Heading>
      <Text>{x} / {y} = {division}</Text>
      <Heading size="medium">Multiplication</Heading>
      <Text>{x} * {y} = {multiplication}</Text>
    </Fragment>
  );
};

export const run = render(
    <Macro
      app={<App />}
    />
  );