hooksとFormフォームの発行

import React, { useState } from "react";
import { Form, Button } from "semantic-ui-react";

const Register = () => {
  const [values, setValues] = useState({
    username: "",
    email: "",
    password: "",
    confirmPassword: ""
  });

  const onChange = event => {
    //  es6   [event.target.name]  key  
    setValues({ ...values, [event.target.name]: event.target.value });
  };

  const onSubmit = event => {
    event.preventDefault();
  };

  return (
    <div>
      <Form onSubmit={onSubmit} noValidate>
        <h1>Register</h1>
        <Form.Input
          label="Username"
          placeholder="Username..."
          name="username"
          value={values.username}
          onChange={onChange}
        ></Form.Input>

        <Form.Input
          label="Email"
          placeholder="Email..."
          name="email"
          value={values.email}
          onChange={onChange}
        ></Form.Input>

        <Form.Input
          label="Password"
          placeholder="Password..."
          name="password"
          value={values.password}
          onChange={onChange}
        ></Form.Input>

        <Form.Input
          label="Confirm Password"
          placeholder="Password..."
          name="confirmPassword"
          value={values.confirmPassword}
          onChange={onChange}
        ></Form.Input>

        <Button type="submit" primary>
          Register
        </Button>
      </Form>
    </div>
  );
};

export default Register;