Firestoreにデータが入らない

ボタンを押してもfirestoreにデーが入らず困っています。
僕のレベルをわかってもらうために言わせてもらうとかなりの初心者です。

TextInpiut　には入力した値が入ってました

ボタンの
onInputをonSubmit onClickにした利したのですがダメでした、、

足りないものがあれば遠慮なくお願いします、、

create画面
1import React, { useState, useReducer, useEffect} from 'react';
2import TextInput from "../../templates/UIkit/TextInput";
3import {saveHandsOn} from "../operations/index";
4import  handsOnReducer from "../reducers"
5import Button from '@material-ui/core/Button';
6
7const CreateHandsOn = () => {
8
9  const [state, dispatch] = useReducer(handsOnReducer, [])
10  const [title, setTitle] = useState(""),
11  [description, setDescription] = useState(""),
12  [tags, setTags] = useState(""),
13  [url, setUrl] = useState("");
14
15
16  return (
17    <section>
18      <h2 className="u-text__headline u-text-center">商品登録、編集</h2>
19      <div className="c-section-container">
20        <TextInput
21        fullWidth={true} label={"タイトル"} multiline={false} 
22        onChange={e => setTitle(e.target.value)} rows={1} value={title} type={"text"}
23        />
24        <TextInput
25        fullWidth={true} label={"説明"} multiline={true} 
26        onChange={e => setDescription(e.target.value)} rows={5} value={description} type={"text"}
27        />
28        <TextInput
29        fullWidth={true} label={"タグ名"} multiline={false} 
30        onChange={e => setTags(e.target.value)} rows={1} value={tags} type={"text"}
31        />
32        <TextInput
33        fullWidth={true} label={"URL"} multiline={false} 
34        onChange={e => setUrl(e.target.value)} rows={1} value={url} type={"text"}
35        />
36        <div className="module-spacer--margin-large"/>
37          <div className="u-text-center"/>
38          <Button  variant="contained" color="primary"  onInput={() => dispatch(saveHandsOn( title, description, tags, url))}>ハンズオン作成</Button>
39      </div>
40    </section>
41  )
42}
43
44export default CreateHandsOn
45
46

operation
1import {db} from '../../firebase/index';
2import {useRouter} from 'next/router'
3import {CREATE_HANDSON} from '../actions'
4
5const handsOnRef = db.collection('handsOn')
6
7
8export const saveHandsOn = (id, title, description, url, tags) => {
9  return async () => {
10      const timestamp = firebase.firestore.Timestamp.now();
11      const router = useRouter()
12
13      const data = {
14        type: CREATE_HANDSON,
15          title: title,
16          description: description,
17          tags: tags,
18          url: url,
19          updated_at: timestamp
20      }
21
22      if (id === "") {
23          const ref = handsOnRef.doc()
24          data.created_at = timestamp;
25          id = ref.id;
26          data.id = id;
27      }
28
29      return handsOnsRef.doc(id).set(data)
30          .then(() => {
31            router.push('/')
32        }).catch((error) => {
33              throw new Error(error)
34          })
35  }
36}

reducer
1const handsOnReducer =(state = [], action ) => {
2  switch (action.type) {
3    case 'CREATE_HANDSON':
4      const handsOn = {title: action.title, description: action.description, tag: action.tag, url: action.url }
5      const length = state.length
6      const  id = length === 0? 1 : state[length - 1].id + 1
7      return [...state , {id, ...handsOn}]
8    default: ""
9    return state
10  }
11}
12export default handsOnReducer