How to clear Multiselect Dropdown in Semantic UI React using a button?

Question

I have a Semantic UI React Multiselect Dropdown inside a React functional component and want to have buttons inside the menu, as such (still need to center them...)

How can I clear the selected values using the 'Clear' button? I am able to clear the selection using the 'x' icon, but that's built into the component.

    <Dropdown
        search
        multiple
        selection
        clearable
        closeOnSelectionChange={false}
        options={filterInitialSuggestions()}
        className='selectDropdown'
        header={dropdownButtons()}
    />
        
    const dropdownButtons = () => {
        return (
            <div>
                <Button positive size='mini'>
                    Save
                </Button>
                <Button grey size='mini' onClick={() => console.log('I want to reset the multi select dropdown')}>
                    Clear
                </Button>
                <Divider />
            </div>
        );
    };

Answer 1

'Save' and 'Clear' buttons with React useState(). In Reactjs you don't need to use DOM queryselector.

https://codesandbox.io/s/white-leftpad-q6re3?file=/src/Fun.jsx