State'im Neden Güncellenmiyor?

React
,
1

Merhabalar. Amacım React ile bir todo list yapmak. En aşağıda bıraktığım kodlar TodoApp component'ini oluşturuyor, bu component'i App.js'te “<TodoApp />” şeklinde çağırıyorum.
Yaşadığım problem şu; “const [list, setList] = useState([]);” şeklinde tanımladığım bir stateim var ve görebileceğiniz üzere submitHandler fonksiyonunda state'i güncellemeye çalıştım fakat test ederseniz görebileceğiniz üzere state'im güncellenemediği için

{list.map((element) => (
          <React.Fragment key={element}>
            <ListGroup.Item className="todo-task">
              {element}
              <Image
                src="https://i.vippng.com/png/small/212-2123323_black-check-mark-logo-bed-mattress-sale-orange.png"
                alt="tickmark"
                className="complated-icon"
                thumbnail
              ></Image>
            </ListGroup.Item>
          </React.Fragment>
        ))}

kodları işlevsiz kalıyor -map metodunun alabileceği argüman olamayacağı için- ve todo task'ları (bu kodların işi todo taskları oluşturmak) sayfada göremiyoruz.
Sorunumun state'imin güncellenmemesinden kaynaklandığını tespit ettim fakat sebebi hakkında hiçbir fikrim yok. Neden state'im güncellenemiyor ?

todoApp.jsx

import React, { useState } from "react";
import { Image, Form, Button, ListGroup } from "react-bootstrap";
import "../styles/todo.css";

function TodoApp() {
  const [text, setText] = useState("");
  const [list, setList] = useState([]);

  function inputChangeHandler(event) {
    setText(event.target.value);
  }

  function submitHandler(event) {
    if (text) {
      setList(list.concat(text));
    } 

    setText("");
    event.preventDefault();
  }

  return (
    <div>
      <Form onSubmit={submitHandler}>
        <Form.Group>
          <Form.Control
            onChange={inputChangeHandler}
            type="text"
            placeholder="Enter your task"
          ></Form.Control>
          <Button variant="primary">Add Item</Button>
        </Form.Group>
      </Form>

      <ListGroup>
        {list.map((element) => (
          <React.Fragment key={element}>
            <ListGroup.Item className="todo-task">
              {element}
              <Image
                src="https://i.vippng.com/png/small/212-2123323_black-check-mark-logo-bed-mattress-sale-orange.png"
                alt="tickmark"
                className="complated-icon"
                thumbnail
              ></Image>
            </ListGroup.Item>
          </React.Fragment>
        ))}
      </ListGroup>
    </div>
  );
}

export default TodoApp;
2

State'in neden güncellenemediğini çözdüm. Ben burada formum submit edildiği zaman state'imin güncellenmesini istemişim, butona basıldığı zaman değil. Yani ben butona basıldığı zaman aynı zamanda form submit edilir diye düşündüğüm için butona onClick event'i vermeyi gereksiz buldum ve az önce fark ettiğim üzere butona basılması formu submit etmiş olmuyor. Enter'a basıp denediğimde submitHandler gerçekten çalıştı -çünkü enter'a basmak direkt submit etmek demek oluyor- ve state'im değişti.
Yani butona basıldığı zaman da state'imin değişmesi için butona bir onClick event'i vermeliyim ve bu event'i de submitHandler'a bağlamalıyım.