Cannot get input value on onClick event in the same div block in antd tree

Question

there. I am using Tree in antd, but I got a trouble when creating a new tree list. Here is my code

import React, { useState } from 'react';
import { Button, Input, Tree } from 'antd';
import type { DataNode, TreeProps } from 'antd/es/tree';
import { DownCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';

const DeptTree: React.FC = () => {
  const [deptName, setDeptName] = useState<string>('');
  const [treeData, setTreeData] = useState<any[]>([
    {
      title: 'parent 1',
      key: '1',
      children: [
        {
          title: 'parent 1-0',
          key: '1-0',
          disabled: true,
          children: [
            {
              title: 'leaf',
              key: '1-0-0',
              disableCheckbox: true,
            },
            {
              title: 'leaf',
              key: '1-0-1',
            },
          ],
        },
        {
          title: 'parent 1-1',
          key: '1-1',
          children: [
            {
              title: <span style={{ color: '#1677ff' }}>sss</span>,
              key: '1-1-1',
            },
          ],
        },
      ],
    },

    {
      title: 'parent 2',
      key: '2',
      children: [
        {
          title: 'parent 2-0',
          key: '2-0',
          disabled: true,
          children: [
            {
              title: 'leaf',
              key: '2-0-0',
              disableCheckbox: true,
            },
            {
              title: 'leaf',
              key: '2-0-1',
            },
          ],
        },
        {
          title: 'parent 2-1',
          key: '2-1',
          children: [
            {
              title: <span style={{ color: '#1677ff' }}>sss</span>,
              key: '2-1-1',
            },
          ],
        },
      ],
    },
  ]);

  const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {
    console.log('selected', selectedKeys, info);
  };

  const onCheck: TreeProps['onCheck'] = (checkedKeys, info) => {
    console.log('onCheck', checkedKeys, info);
  };

  return (
    <div style={{ width: '20%', marginLeft: '20px' }}>
      <Tree
        // checkable
        defaultExpandedKeys={['1', '2']}
        defaultSelectedKeys={['0-0-0', '0-0-1']}
        defaultCheckedKeys={['0-0-0', '0-0-1']}
        onSelect={onSelect}
        onCheck={onCheck}
        treeData={treeData}
      />

      <div
        style={{
          display: 'flex',
          flexWrap: 'wrap',
          gap: '5px',
        }}
      >
        <Button
          onClick={() =>
            setTreeData((prev) => [
              ...prev,

              {
                title: (
                  <div style={{ display: 'flex' }}>
                    <Input
                      style={{ height: '25px' }}
                      onChange={(e) => setDeptName(e.target.value)}
                    />
                    <div style={{ display: 'flex' }}>
                      <DownCircleOutlined
                        onClick={() => console.log(deptName)}
                        // onClick={() =>
                        //   setTreeData((prev) =>
                        //     prev.map((data) =>
                        //       typeof data.key === 'number'
                        //         ? { ...data, title: deptName }
                        //         : { ...data }
                        //     )
                        //   )
                        // }
                        style={{
                          fontSize: '20px',
                          color: 'green',
                          margin: '0 3px',
                        }}
                      />
                      <CloseCircleOutlined
                        style={{ fontSize: '20px', color: 'red' }}
                      />
                    </div>
                  </div>
                ),
                key: Math.random(),
              },
            ])
          }
        >
          register
        </Button>
        <Button>sub-register</Button>
        <Button>modify</Button>
        <Button>delete</Button>
        <DownCircleOutlined
          onClick={() =>
            setTreeData((prev) =>
              prev.map((data) =>
                typeof data.key === 'number'
                  ? { ...data, key: data.key.toString(), title: deptName }
                  : { ...data }
              )
            )
          }
          style={{
            fontSize: '20px',
            color: 'green',
            margin: '0 3px',
          }}
        />
      </div>
    </div>
  );
};

export default DeptTree;

Here is the flow. When I click the 'register' button, there will be an input field (it is on the title key) which I can type something and then when I type something on the input field, the value will be saved into deptName via setDeptName. When I click the DownCircleOutlined Icon, it will save the value on the title key and it will show me a new list of Tree.

However, when I check the input value whether it was sent or not, I just used console.log(deptName), but I saw empty value there.

I moved the DownCircleOutlined button outside of the register button, it read the deptName value.

it looks like antd tree cannot recognize changes.

Is there any way to solve this problem?