Unable to edit config of Macro - undefined Validation error

I am new to Forge Development and am trying to develop a simple confluence macro that will do some math on some variable collected from a MacroConfig UI Kit component.

I was able to deploy the app and add the macro to a page but when I attempt to edit the configuration, I get an error stating “Failed to load Trace ID: undefined Validation error”

Here is my index:

import ForgeUI, { render, Fragment, Macro, Text, MacroConfig, useConfig } from "@forge/ui";

//defines the defaults for variables in the Macro Configuration
const defaultVariables = {
  x: 0,
  y: 0
};


const App = () => {

  //Retrieve the configuration
  const variables = useConfig() || defaultVariables;

  //performs addition of 'x' and 'y'
  const addition = variables.x + variables.y
  return (
    <Fragment>
      <Text>Math</Text>
      <Text>Variables</Text>
      <Text>x = {variables.x}</Text>
      <Text>y = {variables.y}</Text>
      <Text>Addition</Text>
      <Text>{variables.x} + {variables.y} = {addition}</Text>
    </Fragment>
  );
}

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

 // Function that defines the configuration UI
 const Config = () => {
  return (
    <MacroConfig>
      {/* Form components */}
      <TextField name="x" label="x = " defaltValue={defaultVariables.x} />
      <TextField name="y" label="y = " defaltValue={defaultVariables.y} />
    </MacroConfig>
  );
}


export const config = render(<variables />);

Here is the Manifest:

modules:
  macro:
    - key: confluence-math-macro-hello-world
      function: main
      title: Math
      description: Performs Math from variable in the macro config
      config:
        function: config-function-key
  function:
    - key: main
      handler: index.run
    - key: config-function-key
      handler: index.config
app:
  id: ari:cloud:ecosystem::app/705914aa-3535-43cc-9681-d4c6fcabd5a4

Attached is a screenshot.

I did run npm install @forge/ui@latest --save and re-deployed , to no avail.