为了进一步学习和实践Next.js，我尝试制作一个网站，它可以缩短像Tinyurl这样的长URL。但是，我在呈现缩短的URL时遇到了麻烦。我正在使用一个表单，在提交该表单时，应该会出现缩短的URL。Formik和Yup处理表单数据，studiohyperdrive的url缩短器缩短URL。有一个名为result的对象返回如下输出：

{
  id: "6VYN9",
  original: "https://www.google.com",
  target: "https://short.er/6VYN9"
}

但是我不知道如何在Home组件中传递或呈现target。当我输入<a>{result.target}</a>时，Next.js说result不存在。
代码如下：

export default function Home() {
    const formik = useFormik({
        initialValues: {
            link: "",
        },
        validationSchema: Yup.object({
            link: Yup.string()
                .matches(
                    /((https?):\/\/)?(www.)?[a-z0-9]+(\.[a-z]{2,}){1,3}(#?\/?[a-zA-Z0-9#]+)*\/?(\?[a-zA-Z0-9-_]+=[a-zA-Z0-9-%]+&?)?$/,
                    "Please enter a vaild url"
                )
                .required("A URL is required"),
        }),
        onSubmit: (values) => {
            const shortener = new Shortener({
                target: "https://short.ie/",
                alphabet: "alphanumeric",
            });
            // what I'm trying to display:
            const result = shortener.shorten(values.link);
        },
    });
    
    return (
        <div id="container">
            <div className="header-container">
                <h1 id="header">URL Shortie</h1>
            </div>
            <div className="form-container">
                <form onSubmit={formik.handleSubmit}>
                    <label className="label">
                        {formik.touched.link && formik.errors.link ? formik.errors.link : "Your Long URL"}
                    </label>
                    <input
                        className="input"
                        type="url"
                        name="link"
                        value={formik.values.link}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        placeholder="Enter your link here"
                        required
                    />

                    <p className="label">Shortened URL</p>
                    <div className="input copy">
                        // how I'm trying to display it:
                        {/* <a href={result.original} target="_blank">{result.target}</a> */}
                        <a href="" target="_blank">{}</a>
                    </div>

                    <div className="button-container">
                        <input className="submit-btn" type="submit" value="Shorten Url" />

                        <button className="copy-btn">
                            <span class="material-symbols-outlined">content_copy</span>
                            Copy
                        </button>
                    </div>
                </form>

                <h1 id="subheader">Previous URLs</h1>
                <div className="previous-urls-container"></div>
            </div>
        </div>
    );
}