firebaseにデータが入らない

データを入力しようとしたところ

makeHandsOn undefined


Error writing document:  FirebaseError: Function DocumentReference.set() called with invalid data. Unsupported field value: a custom SyntheticEvent object (found in field title in document handsOn/WqOYIi7Z9GYGZDl8UPxz)
ドキュメントの記述エラー：FirebaseError：関数CollectionReference.doc（）では、最初の引数が空でない文字列である必要がありますが、それはカスタムオブジェクトオブジェクトでした。

とエラーが出ます

原因は何でしょうか。。

create
1
2  import React, { useState } from 'react'
3import { db, firebase } from '../../firebase/index'
4import TextInput from '../../templates/UIkit/TextInput'
5import PrimaryButton from '../../templates/UIkit/PrimaryButton'
6
7const CreateHandson = () => {
8  const [title, setTitle] = useState(''),
9    [description, setDescription] = useState(''),
10    [tag, setTags] = useState(''),
11    [url, setUrl] = useState('')
12
13  const timestamp = firebase.firestore.Timestamp.now()
14
15  async function makeHandsOn() {
16    try {
17      const handsOn = {
18        title: title,
19        tag: tag,
20        description: description,
21        url: url,
22      }
23      console.log('makeHandsOn', data)
24      const data = await db.collection('handsOn').doc(handsOn).set({
25        title: title,
26        description: description,
27        tag: tag,
28        url: url,
29        created_at: timestamp,
30        updated_at: timestamp,
31      })
32    } catch (error) {
33      console.error('Error writing document: ', error)
34    }
35  }
36
37  return (
38    <section>
39      <h2 className="u-text__headline u-text-center">商品登録、編集</h2>
40      <div className="c-section-container">
41        <TextInput
42          fullWidth={true}
43          label={'タイトル'}
44          multiline={false}
45          required={true}
46          onChange={setTitle}
47          rows={1}
48          type={'text'}
49        />
50        <TextInput
51          fullWidth={true}
52          label={'説明'}
53          multiline={true}
54          required={true}
55          onChange={setDescription}
56          rows={5}
57          type={'text'}
58        />
59        <TextInput
60          fullWidth={true}
61          label={'タグ名'}
62          multiline={false}
63          required={true}
64          onChange={setTags}
65          rows={1}
66          type={'text'}
67        />
68        <TextInput
69          fullWidth={true}
70          label={'URL'}
71          multiline={false}
72          required={true}
73          onChange={setUrl}
74          rows={1}
75          type={'text'}
76        />
77        <div className="module-spacer--medium" />
78        <PrimaryButton label={'商品情報を保存'} onClick={makeHandsOn} />
79      </div>
80    </section>
81  )
82}
83
84export default CreateHandson
85