スプレッド構文を使って配列の要素を追加したいが、undefinedと出てしまいます

###実現したいこと

button.jsのボタンを押したときに配列が生成されるようにしたい。
newarrという配列に入力した時刻のミリ秒と現在の時刻のミリ秒の差を要素としてクリックするたびに配列に追加したいです。
初心者のためどうしてundefinedと表示されるのかについても教えていただきたいです。
###エラー内容
console.log(newarr)でundefinedと表示されてしまう。

###ソースコード

Javascript
1
2import classes from './taskinput.module.css'
3import React, { useState } from 'react';
4
5import Button from './button'
6
7const getKey = () => Math.random().toString(32).substring(2);
8
9function Taskinput() {
10    //タスクの追加
11    const initialState = [
12        {
13            task: '',
14            time: '',
15            dead: '',
16            message: '',
17            isCompleted: false
18        },
19        /* {
20            task: 'Learn React Hook',
21            isCompleted: false
22        },
23        {
24            task: 'Learn Gatsby.js',
25            isCompleted: false
26        }, */
27    ]
28
29    const [todos, setTodo] = useState(initialState);
30
31
32    const [task, setTask] = useState('')
33
34    const handleNewTask = (event) => {
35        setTask(event.target.value)
36    }
37
38    //タスクにかかる時間について
39    const [time, setTime] = useState('1h')
40
41    const options = [
42
43    ]
44    const Change = e => {
45        console.log(setTime(e.target.value))
46        setTime(e.target.value)
47    }
48
49    console.log(options.value)
50    console.log(time)
51
52    //taskの締め切りについて
53    var today = new Date()
54
55
56    var nowdate = today.getTime()
57    console.log(nowdate)
58    console.log(today)
59
60    const [dead, setDead] = useState('')
61
62
63    const [year, setYear] = useState('')
64    const [month, setMonth] = useState('')
65    const [day, setDay] = useState('')
66    /* const [hour, setHour] = useState('') */
67
68    var targetDate = new Date(year, month, day)
69    var changeDate = targetDate.getTime();
70    console.log(changeDate)
71    const differdate = changeDate - nowdate
72    console.log(changeDate - nowdate)
73
74    console.log(dead)
75
76    console.log(todos)
77
78    const [arr, setArr] = useState([''])
79
80    /*     const [message, setMessage] = useState(initialState) */
81
82    //plusbuttonクリック時のイベント
83    const handleSubmit = (event) => {
84        event.preventDefault()
85        if (task === '') return
86        setTodo(todos => [...todos, { task, time, dead, /* message */ isCompleted: false }])
87        setTask('')
88        console.log('add')
89        /* setMessage(() => { as: differdate }) */
90
91        let newarr = setArr([...arr, `${differdate}`])
92        console.log(setArr([...arr, `${differdate}`]))
93        console.log(newarr)
94        console.log(arr)
95        console.log(differdate)
96    }
97
98    /* console.log(message) */
99
100    const handleRemoveTask = index => {
101        const newTodos = [...todos]
102        newTodos.splice(index, 1)
103        setTodo(newTodos)
104
105    }
106
107
108
109    return (
110        <>
111            <h1>ToDo List</h1>
112            <div className={classes.todolist}>
113
114                <div>
115                    <form >
116                        Add Task : <input value={task} placeholder="Add New Task" onChange={handleNewTask} />
117
118                    </form>
119                </div>
120
121                <div>
122                    <p>想定される時間</p>
123                    <select
124                        onChange={Change}
125                        value={time}
126                    >
127                        <option value="1h">1h</option>
128                        <option value="2h">2h</option>
129                        <option value="3h">3h</option>
130                        <option value="4h">4h</option>
131                        <option value="5h">5h</option>
132                        <option value="6h">6h</option>
133                    </select>
134                    <div>{time}</div>
135
136                </div>
137                <div>
138                    <input type="text" onChange={e => setYear(e.target.value)} />年
139                    <input type="text" onChange={e => setMonth(e.target.value)} />月
140                    <input type="text" onChange={e => setDay(e.target.value)} />日
141                    {/* <input type="text" onChange={e => setHour(e.target.value)} />時 */}
142                    <div>{year}年{month}月{day}日</div>
143                    {/* <input type="date"
144                        onChange={e => setDead(e.target.value)} />
145                    <div>{dead}</div> */}
146                </div>
147                <div><Button clicked={handleSubmit} /></div>
148            </div>
149            <ul>
150                {todos.map((todo, index) => (
151                    <div className={classes.tasklist}>
152                        <li key={getKey()}>{todo.task} </li>
153                        <li key={getKey()}>{todo.time}</li>
154                        <li key={getKey()}>{todo.dead}</li>
155                        {/* <li key={getKey()}>締め切りまで{todo.message}</li> */}
156                        <input
157                            type="button"
158                            onClick={() => handleRemoveTask(index)}
159                            value="削除" />
160                    </div>
161                ))}
162
163
164            </ul>
165        </>
166    );
167}
168
169export default Taskinput;
170

javascript
1import React, { useState } from 'react'
2import classes from './button.module.css'
3
4const Button = (props) => {
5    return (
6        <div
7            className={`${classes.icon} ${classes.iconplus}`}
8            onClick={props.clicked} >
9            <span className={classes.icon__mark}></span>
10        </div>
11    )
12}
13
14export default Button;

###試してみたこと
console.logで何が入っているのかを確認しました。differdateにはちゃんと値が入っていて、現在の時刻とテキストボックスに入力した時刻をgetTime()した値の差が入っていました。文字列の配列の身なのかと思い、${differdate}として文字列にしてみましたが、表示は同じくundefinedのままでした。