React-select facing multiple errors when implementing select all/unselect all with initial loaded values

I'm trying to implement a react-select component that has the Select All function with initial loaded values from an API. After I selected the options, it will send the selected options to it's parent component, App.js in this case with the method getEmployeeVisibility. The select works if there is no initial loaded values, but when I have some initial values that are loaded to the select, there are a few problems that I'm facing:

1. I have to double click to select an option after the initial click
2. If there's only one initial loaded option , I will get the valueRef.current.some is not a function error when opening the input options
3. If I deselect everything, I will get the Cannot read property 'toString' of null error in App.js.

What is the correct way to load initial values to the select in this case?

Here is my codesandbox for reference: