Settings: Disabling/hiding options of a Select-component

[LobsterOfTruth]

I'm trying to disable or hide some options of a Select component. I need this since I have several Selects using the same Options-Pool. If an option is used in another Select, it can't be used again.

Here's what we're starting with:

4 options, all visible, Option 2 selected

4 options, all visible, Option 2 selected

Now I can't find a way to simply disable options so that it would appear in a faded way and would not be selectable. Any ideas?

Now I tried to hide options 2 and 4 by conditionally not rendering them via the renderItem section:

It kind of works, but they still take up space, still show the lines and even the checkmark from the previous selection. I guess I'd have to do some CSS manipulation, but I don't have a clue which CSS is used here.

I guess the next best option would be to manipulate the options-array of the select itself and delete an option entirely. If someone has a clue how to go about this, I'd be grateful.

Here are the code snippets from the two screenshots:

            <Select
                label="Example"
                settingsKey="example"
                maxItems="4"
                options={[
                    { name: 'Sample option 1', disabled: false, value: { icon: 'https://tinyurl.com/ybbmpxxq' } },
                    { name: 'Sample option 2', disabled: false, value: { icon: 'https://tinyurl.com/ybbmpxxq' } },
                    { name: 'Sample option 3', disabled: false, value: { icon: 'https://tinyurl.com/ybbmpxxq' } },
                    { name: 'Sample option 4', disabled: false, value: { icon: 'https://tinyurl.com/ybbmpxxq' } }
                ]}
                renderItem={
                    (option) =>
                        <TextImageRow
                            label={option.name}
                            icon={option.value.icon}
                        />
                }
            />

            <Select
                label="Example"
                settingsKey="example"
                maxItems="4"
                options={[
                    { name: 'Sample option 1', disabled: false, value: { icon: 'https://tinyurl.com/ybbmpxxq' } },
                    { name: 'Sample option 2', disabled: true, value: { icon: 'https://tinyurl.com/ybbmpxxq' } },
                    { name: 'Sample option 3', disabled: false, value: { icon: 'https://tinyurl.com/ybbmpxxq' } },
                    { name: 'Sample option 4', disabled: true, value: { icon: 'https://tinyurl.com/ybbmpxxq' } }
                ]}
                renderItem={
                    (option) =>
                        !option.disabled &&
                        <TextImageRow
                            label={option.name}
                            icon={option.value.icon}
                        />
                }
            />