When using Select with a ScrollArea inside, keyboard navigation arrow up and down keys don't work - Am I doing something wrong?

[2snEM6]

If I use Select with a ScrollArea inside, navigating the list of items with the keyboard up and down arrows doesn't work. Am I doing something wrong?

Here the snippet:

<Select.Root defaultValue={questions[0]?.id} onValueChange={onValueChange}>
      <Box
        renderAs={Select.Trigger}
        padding="small"
        light
        className={styles['select-trigger']}
      >
        <Select.Value />
      </Box>
      <Select.Portal>
        <Select.Content
          className={styles['select-content']}
          asChild
          position="popper"
          hideWhenDetached
        >
          <ScrollArea.Root className={styles['scroll-area-root']} type="auto">
            <Select.Viewport asChild>
              <Box
                paddingless
                renderAs={ScrollArea.Viewport}
                className={styles['scroll-area-viewport']}
              >
                {questions.map((q, i) => (
                  <Select.Item value={q.id} className={styles['select-item']}>
                    <Select.ItemText>
                      <H size={5} className={styles['answer-index-text']}>
                        <Trans>
                          Answer {i + 1} of {total}
                        </Trans>
                      </H>
                      <H
                        size={4}
                        style={{
                          fontWeight: 'bold',
                          marginTop: '0.25rem',
                          marginBottom: 0,
                        }}
                      >
                        {q.title}
                      </H>
                    </Select.ItemText>
                  </Select.Item>
                ))}
              </Box>
            </Select.Viewport>
            <ScrollArea.Scrollbar
              className={styles['scroll-area-scroll-bar']}
              orientation="vertical"
            >
              <ScrollArea.Thumb className={styles['scroll-area-thumb']} />
            </ScrollArea.Scrollbar>
          </ScrollArea.Root>
        </Select.Content>
      </Select.Portal>
    </Select.Root>