Need Assistance with React-Select Multi-Select Grouped Options

Question

I am using react-select multi-select component with grouped options. I would like to select all the options under the group when the group header is clicked.

This I have accomplished and works fine

const Group = (props: any) => {
    const onClick = () => props.selectProps.onChange(props.options);

    return (
        <chakraComponents.Group
            {...props}
            headingProps={{ ...props.headingProps, onClick }}
        />
    );
};

What I would like to accomplish is:

• Append to the already selected options instead of just selecting the options on group header click.
• Decrease the count number from the group header when the option gets selected.
• Show the count of options(in header label) that matched the search criteria.

Here is the codesandbox link