React Forms Input with Shopify Polaris & Typescript

tsx

import React, { ReactElement, useState, useCallback } from 'react'
import { TextField, FormLayout, Form } from '@shopify/polaris';

export default function ButtonForm(): ReactElement {

    const [buttonText, setbuttonText] = useState('Button text');
    const handleSubmit = (e: React.SyntheticEvent<HTMLFormElement>) => {
        e.preventDefault();
        console.log(buttonText);
    };

    const handleChange = useCallback((newButtonText) => setbuttonText(newButtonText), []);
    console.log(buttonText)
    return (
        <Form onSubmit={handleSubmit}>
            <FormLayout >
                <TextField
                    id="ButtonText"
                    label="Button Text"
                    onChange={handleChange}
                    value={buttonText}
                />
            </FormLayout>
        </Form>
    )
}