如何仅使用React中的函数组件获取输入的文本值?

import Layout from "components/Layout"
import { useState } from "react";

export async function getServerSideProps(context) {
    const res = await fetch(`${process.env.NEXT_API_URL}/kana-terms/all`)
    const data = await res.json()
    return {props: {data}}
}

function checkAnswer(event) {
    if (event.key === "Enter") {
        console.log("Enter key was pressed");
    }
}

export default function Hiragana(props) {
    const [remainingTerms, setRemainingTerms] = useState(props.data);
    return (
        <Layout>
            <h1>Hiragana</h1>
            <div className="bg-light border w-100">
                <h2>{remainingTerms[0].hiraganaText}</h2>
                <input type="text" onKeyUp={(event) => {checkAnswer(event, )}} />
            </div>
        </Layout>
    )
}

我想传递 <input> 元素到 checkAnswer() 功能。

在React中如何仅使用功能组件?

我也在使用Next.js。。。如果有关系的话。