tutorial on amplify and bedrocks do not works

the following example:

https://aws.amazon.com/getting-started/hands-on/build-serverless-web-app-lambda-amplify-bedrock-cognito-gen-ai/

dosn't works, the call:

const { data, errors } = await amplifyClient.queries.askBedrock({ ingredients: [formData.get("ingredients")?.toString() || ""], });

initialize errors with:

"path": [ "askBedrock" ], "data": null, "errorType": "Code", "errorInfo": null, "locations": [ { "line": 2, "column": 3, "sourceName": null } ], "message": "code.js:39:13: Uncaught TypeError: Cannot read property '0' of undefined"

It seems that the call to the function askBedrock never happen! I cannot figure out why:

This is all the code in app.ts file:

import { FormEvent, useState } from "react";
import { Loader, Placeholder } from "@aws-amplify/ui-react";
import "./App.css";
import { Amplify } from "aws-amplify";
import { Schema } from "../amplify/data/resource";
import { generateClient } from "aws-amplify/data";
import outputs from "../amplify_outputs.json";
import "@aws-amplify/ui-react/styles.css";
Amplify.configure(outputs);
const amplifyClient = generateClient<Schema>({
  authMode: "userPool",
});
function App() {
  debugger;
  console.log("app =========");
  const [result, setResult] = useState<string>("");
  const [loading, setLoading] = useState(false);
  console.log("app1 =========");
  const onSubmit = async (event: FormEvent<HTMLFormElement>) => {
    console.log("app2 =========");
    event.preventDefault();
    setLoading(true);
    try {
      console.log("app3 =========");
      const formData = new FormData(event.currentTarget);
      const { data, errors } = await amplifyClient.queries.askBedrock({
        ingredients: [formData.get("ingredients")?.toString() || ""],
      });
      if (!errors) {
        console.log("app4 =========");
        setResult(data?.body || "No data returned");
      } else {
        console.log("newLocal");
        console.log(errors);
      }
    } catch (e) {
      console.log("catch =========");
      console.log(e);
      alert(`An error occurred: ${e}`);
    } finally {
      console.log("app5 =========");
      setLoading(false);
    }
  };
  return (
    <div className="app-container">
      <div className="header-container">
        <h1 className="main-header">
          Meet Your Personal
          <br />
          <span className="highlight">Recipe AI</span>
        </h1>
        <p className="description">
          Simply type a few ingredients using the format ingredient1,
          ingredient2, etc., and Recipe AI will generate an all-new recipe on
          demand...
        </p>
      </div>
      <form onSubmit={onSubmit} className="form-container">
        <div className="search-container">
          <input
            type="text"
            className="wide-input"
            id="ingredients"
            name="ingredients"
            placeholder="Ingredient1, Ingredient2, Ingredient3,...etc"
          />
          <button type="submit" className="search-button">
            Generate
          </button>
        </div>
      </form>
      <div className="result-container">
        {loading ? (
          <div className="loader-container">
            <p>Loading...</p>
            <Loader size="large" />
            <Placeholder size="large" />
            <Placeholder size="large" />
            <Placeholder size="large" />
          </div>
        ) : (
          result && <p className="result">{result}</p>
        )}
      </div>
    </div>
  );
}
export default App;

I'm new both on react that on aplify :)