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 (
      <Text>x = {variables.x}</Text>
      <Text>y = {variables.y}</Text>
      <Text>{variables.x} + {variables.y} = {addition}</Text>

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

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

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

Here is the Manifest:

    - key: confluence-math-macro-hello-world
      function: main
      title: Math
      description: Performs Math from variable in the macro config
        function: config-function-key
    - key: main
      handler: index.run
    - key: config-function-key
      handler: index.config
  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.