antd 在下拉菜单中修改

import React, { useState, useRef } from 'react';
import 'antd/dist/antd.css';
import './index.css';
import { PlusOutlined } from '@ant-design/icons';
import { Divider, Input, Select, Space, Button, Popover } from 'antd';

const { Option } = Select;
let index = 0;

const App = () => {
  const [items, setItems] = useState(['jack', 'lucy']);
  const [name, setName] = useState('');
  const inputRef = useRef(null);

  const [editKey, setEditKey] = useState();

  const [selectValue, setSelectValue] = useState();

  const [value, setValue] = useState();

  const onNameChange = (event) => {
    setName(event.target.value);
  };

  const addItem = (e) => {
    e.preventDefault();
    setItems([...items, name || `New item ${index++}`]);
    setName('');
    setTimeout(() => {
      inputRef.current?.focus();
    }, 0);
  };

  const renderOption = (text) => (
    <div key={text} class="option_div">
      {editKey === text ? (
        <div>
          <Input value={value} onChange={(e) => setValue(e.target.value)} />
          <div>
            <Button
              size="small"
              type="link"
              onClick={() => {
                setItems((proitem) => {
                  return [
                    ...proitem.map((i) => {
                      return i === text ? value : i;
                    }),
                  ];
                });
                setEditKey();
              }}
            >
              保存
            </Button>
            <Button size="small" type="link" onClick={() => setEditKey()}>
              取消
            </Button>
          </div>
        </div>
      ) : (
        <div>
          <span onClick={() => setSelectValue(text)}>{text}</span>
          <Button
            size="small"
            type="link"
            onClick={() => {
              setEditKey(text);
              setValue(text);
            }}
          >
            编辑
          </Button>
        </div>
      )}
    </div>
  );
  return (
    <Select
      style={{
        width: 300,
      }}
      value={selectValue}
      placeholder="custom dropdown render"
      dropdownRender={() => {
        return (
          <>
            {items.map((item) => renderOption(item))}
            <Divider
              style={{
                margin: '8px 0',
              }}
            />
            <Space
              style={{
                padding: '0 8px 4px',
              }}
            >
              <Input
                placeholder="Please enter item"
                ref={inputRef}
                value={name}
                onChange={onNameChange}
              />
              <Button type="text" icon={<PlusOutlined />} onClick={addItem}>
                Add item
              </Button>
            </Space>
          </>
        );
      }}
    ></Select>
  );
};

export default App;