Todoリストに追加ができない

Question

todoリストを作成中
追加ボタンを押しても
ボタンを押せないことに気づきました。

Reactディベロッパーツールにて
input の値は取れていましたが
buttonの値が取れていませんでした

props

children
"追加！"
color
"primary"
tag
"button"
type
"submit"
new prop: ""

VSコードで見たら
todos
が未定義との6件のエラー？、問題点が見つかりました

App.js


import React ,{useState}from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import {Container, Form, InputGroup, InputGroupAddon, Input, Button} from 'reactstrap';

function App() {
  const [value, setValue] = useState('')
  const [todos, setTodos] = useState([])

  const handleSubmit = e =>{
    e.preventDefault()
    console.log(value)変化なし
    addTodo(value)
  }
  const addTodo =text =>{
    const newTodos= [...todos, text]
    setTodos(newTodos)
    console.log(newTodos)　変化なし
  }
  return (
    <div className="App">
    <Container>
      <h1 className="mt-4">TO do リスト</h1>
      <Form onSubmit={handleSubmit}>
        <InputGroup>
         <Input type="text"
          value={value}
          onChange ={e => setValue(e.target.value)}/>
          <InputGroupAddon addonType="append">
            <Button type="submit" color="primary">追加！</Button>
          </InputGroupAddon>  
        </InputGroup>
      </Form>
    </Container>
    </div>
  );
}

export default App;

value->defaultValue

onChange →onInput

<Button type ="button" color="primary" onClick={() => addTodo(value)}>追加</Button>

これらを試してもダメでした、、、

Answer 1

<Container> を追加していませんでした、、、

しつれいしました