Increasing the height of SelectMenu dropdown list, how?

[gioza1]

Currently using evergreen-ui 4.27.4

The problem with using the component's titleView property is that, when the header height is tall, some select menu items are not rendered properly (hidden).

Supposedly, in the image above, "hhhhhhh" should be displayed but was not rendered correctly.

  public render() {
    const { children } = this.props;
    let options = [];
    options.push({ label: '00000000', value: '00000000' });
    options.push({ label: '11111111', value: '11111111' });
    options.push({ label: '22222222', value: '22222222' });
    options.push({ label: 'aaaaaaaa', value: 'aaaaaaaa' });
    options.push({ label: 'bbbbbbbb', value: 'bbbbbbbb' });
    options.push({ label: 'cccccccc', value: 'cccccccc' });
    options.push({ label: 'dddddddd', value: 'dddddddd' });
    options.push({ label: 'eeeeeeee', value: 'eeeeeeee' });
    options.push({ label: 'ffffffff', value: 'ffffffff' });
    options.push({ label: 'gggggggg', value: 'gggggggg' });
    options.push({ label: 'hhhhhhhh', value: 'hhhhhhhh' });

    return (
      <SelectMenu
        className={'someClassName'}
        filterPlaceholder={'Filter by name...'}
        isMultiSelect={true}
        titleView={this.getCustomTitleView}
        hasTitle={true}
        hasFilter={true}  
        options={...options}
        onSelect={this.onDeviceSelectHandler}
        onDeselect={this.onDeviceDeselectHandler}
      >
        {children}
      </SelectMenu>
    );
  }

  private getCustomTitleView() {
    return (
      <Pane
        display="flex"
        flexDirection="column"
        borderBottom="default"
        padding={8}
        boxSizing="border-box"
      >
        <Heading size={400}>{this.props.title}</Heading>
        <Pane marginTop={5}>
          <Button width={'100%'} justifyContent="center">
            Clear all selections
          </Button>
        </Pane>
      </Pane>
    );
  }

I've tried adding a className property to the component to use the following CSS (see below) hoping that it would dynamically increase the height to this but so far it wouldn't work.

.someClassName:nth-of-type(1) {
  height: 285px;
}

Manually adding it via console works however:

Any leads/help would be appreciated!

[gioza1]

Fixed by using minHeight instead of height property

<SelectMenu
   minHeight={282}
   ...
>
...
</SelectMenu>