Next.jsでモーダル実装時にonClickが反応しない

前提・実現したいこと

フロントエンドとバックエンドの勉強も兼ねてTODOアプリを作っている
todoリストの更新の際に下記挙動としたい

更新ボタンクリック
更新用のモーダルが出る
値を入力
APIを叩き更新

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

flagを持たせてモーダル表示までは完了している。
しかしモーダルUI内のonChangeやonClickが発火しないため、ロジックが組めない状況。

こちらの解消方法についてご教授いただきたい。

該当のソースコード

import Axios from 'axios';
import React, { useEffect, useState } from 'react';

const UI = () => {
  const ENDPOINT = 'http://0.0.0.0:8000/api/todos';

  const [data, setdata] = useState([]);
  const [modalFlag, setModalFlag] = useState(false);
  const [changeTodo, setChangeTodo] = useState('');

  //   const fetchTodo = async () => {
  //     await Axios.get(ENDPOINT)
  //       .then((data) => {
  //         console.log(data)
  //         return data.data
  //       })
  //       .catch((e) => console.log(e))
  //   }

  useEffect(() => {
    Axios.get(ENDPOINT)
      .then((data) => {
        setdata(data.data);
      })
      .catch((e) => alert(e));
  }, []);

  if (modalFlag) {
    return (
      <>
        <div
          className="modal-overlay"
          onClick={() => {
            console.log('クリック');
            setModalFlag(false);
          }}
        >
          <div className="bg-white box-border border-solid border-black border-2 p-2 z-10 w-2/4 form">
            <div className="text-center">todoリストの更新</div>

            <div className="text-center">
              <span>入力</span>
              <input
                type="text"
                className="box-border border-black border-1 bg-gray-200"
                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                  console.log(e.target.value);
                  setChangeTodo(e.target.value);
                }}
              />
            </div>

            <div className="text-center">
              <button
                className="rounded-md bg-green-300 p-1"
                onClick={async () => {
                  console.log('クリック');
                  await Axios.put(ENDPOINT, changeTodo).then(() => {
                    setModalFlag(false);
                  });
                }}
              >
                保存する
              </button>
            </div>
          </div>
        </div>
        <style jsx>{`
          .modal-overlay {
            z-index: 1;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 120%;
            background-color: rgba(0, 0, 0, 0.75);
          }
          .form {
            margin: auto;
          }
        `}</style>
      </>
    );
  }

  return (
    <div>
      {data.map((data) => (
        <div key={data.id}>{data.memo}</div>
      ))}

      <button
        className="rounded-md bg-green-300 p-1"
        onClick={() => {
          setModalFlag(true);
        }}
      >
        todoの更新ボタン
      </button>
    </div>
  );
};

export default UI;