使用带有React-hooks的React Semantic UI中的Form.Select

Question

顾名思义，我在Next.js项目中将RSUI与React-Hooks结合使用，并且试图弄清楚如何将有效载荷从Form.Select发送到graphql端点。我为上下文添加了许多额外的代码，但实际上我要用的是使用setValues成功设置“ security_type”

import React, { useState } from 'react'
import Router from 'next/router'
import { Button, Checkbox, Form, Segment, Table } from 'semantic-ui-react'

import Layout from '../../components/layout'
import Loading from '../../components/loading'
import Error from '../../components/error'
import { useFetchUser } from '../../lib/user'
import { useQuery, useMutation } from '@apollo/react-hooks';
import query from '../../graphql/project/query';
import mutation from '../../graphql/project/mutation';


const security_types = [
  { key: 'Bank Guarantee', value: 'Bank Guarantee', text: 'Bank Guarantee', name: 'Bank Guarantee' },
  { key: 'Cash Retention', value: 'Cash Retention', text: 'Cash Retention', name: 'Cash Retention' },
  { key: 'Surety Bond', value: 'Surety Bond', text: 'Surety Bond', name: 'Surety Bond' },
];

function CreateProject() {
  const { loading, error, data } = useQuery(query);
  const [createProject] = useMutation(mutation,
      {
        onCompleted(data) {
          Router.replace("/create_project", "/project/"+data.createProject.project_id, { shallow: true });
        }
      });
  const { user, user_loading } = useFetchUser()

  let [form, setValues] = useState({
    project_number: '',
    project_name: '',
    security_type: '',
  });

  let updateField = e => {
    console.log('e: ',e)
    setValues({
      ...form,
      [e.target.name]: e.target.value
    });
  };

  let mutationData = ''

  if (loading) return <Loading />;
  if (error) return  <Error />;
  return (
    <Layout user={user} user_loading={user_loading}>
    <h1>Let's create a project</h1>
      {user_loading ? <>Loading...</> : 
      <div>
        <Segment>
          <Form
            onSubmit={e => {
              e.preventDefault();
              console.log('form: ',form)
              createProject({ variables: { ...form } });
              form = '';
            }}>
            <Form.Input
              fluid
              label='Project Number'
              name="project_number"
              value={form.project_number}
              placeholder="Project Number"
              onChange={updateField}
            />
            <Form.Input
              fluid
              label='Project Name'
              name="project_name"
              value={form.project_name}
              onChange={updateField}
            />
            <Form.Select
              fluid
              selection
              label='Security Type'
              options={security_types}
              placeholder='Security Type'
              name="security_type"
              value={form.security_type}
              onChange={(e, { value }) => setValues(console.log('value: ',value),{"security_type": value })}
            />
            <Button>Submit</Button>
          </Form>
        </Segment>
    </div>
      }
    </Layout>
  );
}

export default CreateProject;

我认为我所有的麻烦都与onChange部分有关，因此任何帮助都会很大。