react looping hooks to display in other hook

1import React, { useState } from "react";
2
3function App() {
4
5  const [list, setList] = useState(" ");
6
7  const [items, updateOnClick] = useState([ ]);
8
9  function updateList(event) {
10    const valueEntered = event.target.value;
11    setList(valueEntered);
12  }
13
14  function updateClick(){
15     updateOnClick(list);
16     }
17 return (
18           <input onChange={updateList} type="text" value={list} />
19            <button onClick={updateClick}>
20              <span>Add</span>
21            </button>
22            <div>
23              <ul>
24                {items.map(item => <li>{item}</li>) }
25              </ul>
26            </div>);}
27export default App;