Multi-group multi-select dropdown with maximum of selections per group using react-select

The question that I am about to make has been made in the following link:
Multi-Category Dropdown using react-select but is yet to be answered.

I am using react-select to implement a Dropdown menu with multiple selection and multiple option groups and I am trying to limit the selection to one item from each group. At the moment I have implemented the multiple group and multiple selection part of the dropdown. Here is my code for the dropdown data:

const groupByFieldOptions = [
    { key: "1", value: "imsi/iccid", label: "IMSI/ICCID", optgroup: "Field" },
    { key: "2", value: "plmn", label: "PLMN", optgroup: "Field" },
    { key: "3", value: "service", label: "Service", optgroup: "Field" },
    { key: "4", value: "customer", label: "Customer", optgroup: "Field" },
    { key: "5", value: "all", label: "All", optgroup: "Field" },
  ];

const groupByPeriodOptions = [
    { key: "1", value: "day", label: "Day" },
    { key: "2", value: "month", label: "Month" },
    { key: "3", value: "year", label: "Year" },

];

const groupOptions = [
    {
        label: "Field",
        options: groupByFieldOptions,
    },
    {
        label: "Period",
        options: groupByPeriodOptions,
    },
];

and here is the part of my code for the dropdown menu with react-select:

<Select
    className="react-select-container"
    classNamePrefix="react-select"
    isMulti
    options={groupOptions}
    closeMenuOnSelect={false}
/>

Could anyone let me know how I can implement this functionality?