ページ遷移とuseStateによる値の更新を正常に行いたい

前提

OS：mac
ブラウザ：Google Chrome
バージョン：react18.2.0 / react-router-dom 6.4.0

実現したいこと

発生している問題・エラーメッセージ

①ページ遷移のボタンが１クリックで効かない

②useStateの更新が1クリック前の値で行われる

該当のソースコード

https://github.com/yuki96422/react-todo

AddTaskModal.jsx

import { useState } from 'react';
import {
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalFooter,
  ModalBody,
  ModalCloseButton,
  useDisclosure,
  Button,
  Input,
} from '@chakra-ui/react';
import { SmallAddIcon } from '@chakra-ui/icons';

const AddTaskModal = () => {
  const { isOpen, onOpen, onClose } = useDisclosure();

  const CircleButtonStyle = {
    background: '#319795',
    cursor: 'pointer',
    color: 'white',
    borderRadius: '50%',
    width: '60px',
    height: '60px',
    position: 'fixed',
    right: '60px',
    bottom: '60px',
  };

  const [todo, setTodo] = useState('');
  const [incompleteTodo, setIncompleteTodo] = useState([]);

  const onChangeTodo = (e) => setTodo(e.target.value);
  const onClickAdd = () => {
    if (todo === '') return;
    const newTodo = [...incompleteTodo, todo];
    setIncompleteTodo(newTodo);
    setTodo('');
    console.log(incompleteTodo);
  };

  const onClickDelete = () => {
    setTodo('');
  };

  return (
    <>
      <Button onClick={onOpen} style={CircleButtonStyle}>
        <SmallAddIcon w={8} h={8} />
      </Button>

      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>新規タスクを作成</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            <Input placeholder="+新しいタスクを入力" value={todo} onChange={onChangeTodo} />
          </ModalBody>

          <ModalFooter>
            <Button
              bgColor="teal.500"
              color="white"
              borderRadius={10}
              mr={3}
              _hover={{ bgColor: 'teal.300' }}
              onClick={onClickAdd}
            >
              追加
            </Button>

            <Button
              bgColor="gray.400"
              color="white"
              borderRadius={10}
              _hover={{ bgColor: 'gray.300' }}
              onClick={onClickDelete}
            >
              キャンセル
            </Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  );
};

export default AddTaskModal;

router.jsx

import {Routes,Route} from "react-router-dom"
import TaskList from "../components/pages/TaskList"
import Home from "../components/pages/Home"
import Page404 from "../components/pages/Page404"

const Router = () => {
  return(
    <Routes>
    <Route path="/" element={<Home />} />
    <Route path="list" element={<TaskList />} />
    <Route path="*" element={<Page404 />} />
  </Routes>
  )
}

export default Router;