React Daily questions the use of, antd select components

official example of full copy:
this is the official sample code:

import { Select } from "antd";
const Option = Select.Option;

function handleChange(value) {
  console.log(`selected ${value}`);
}

ReactDOM.render(
  <div>
    <Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}>
      <Option value="jack">Jack</Option>
      <Option value="lucy">Lucy</Option>
      <Option value="disabled" disabled>Disabled</Option>
      <Option value="Yiminghe">yiminghe</Option>
    </Select>
    <Select defaultValue="lucy" style={{ width: 120 }} allowClear disabled>
      <Option value="lucy">Lucy</Option>
    </Select>
  </div>
, mountNode);

here is my actual use

          <div>
              <Select defaultValue="lucy" style={{ width: 120 }}  onChange={this.handleChange}>
                <Option value="jack" type="option">Jack</Option>
                <Option value="lucy" type="option">Lucy</Option>
                <Option value="disabled"  disabled>Disabled</Option>
                <Option value="Yiminghe" >yiminghe</Option>
              </Select>
          </div>

error prompt:

TypeError: Cannot read property "isSelectOptGroup" of undefined
(anonymous function)
C:/Users/wenji/Desktop/my-react-app/node_modules/rc-select/es/Select.js:625

No description related to isSelectOptGroup can be found in the official antd documentation. The source code of the select component is as follows. Can you give me some advice?

  this.getLabelBySingleValue = function (children, value) {
    if (value === undefined) {
      return null;
    }
    var label = null;
    React.Children.forEach(children, function (child) {
      if (!child) {
        return;
      }
     if (!!child.type.isSelectOptGroup) {
        var maybe = _this2.getLabelBySingleValue(child.props.children, value);
        if (maybe !== null) {
          label = maybe;
        }
      } else if (getValuePropValue(child) === value) {
        label = _this2.getLabelFromOption(child);
      }
    });
    return label;
  };

try to add a type attribute to the parent-child component, but it is still invalid

         <div>
          <Select defaultValue="lucy" style={{ width: 120 }} type={{isSelectOptGroup:false}} onChange={this.handleChange}>
            <Option value="jack" type="option">Jack</Option>
            <Option value="lucy" type="option">Lucy</Option>
            <Option value="disabled" type={{isSelectOptGroup:false}} disabled>Disabled</Option>
            <Option value="Yiminghe" type={{isSelectOptGroup:false}}>yiminghe</Option>
          </Select>
          </div>
Feb.26,2021

so, did you Select.Option by official instance

import { Select } from 'antd';
const Option = Select.Option;
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e7b45f-841.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e7b45f-841.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?