Por que meu Accordion do react-bootstrap não funciona em dispositivos pequenos?

Eu tenho um simples Accordion em um dos meus componentes.

function CustomToggle({eventKey}) {
    const (children, setChildren) = useState('Mais filtros 🠗')
    const decoratedOnClick = useAccordionToggle(eventKey, () =>
        setChildren(children === 'Mais filtros 🠗' ? 'Menos filtros 🠕' : 'Mais filtros 🠗')
    )
  
    return (
        <div className="text-center">
            <div className="tag align-center" onClick={decoratedOnClick}>
                {children}
            </div>
        </div>
    )
  }


...


<Accordion>
    <CustomToggle eventKey="0" />
    <Accordion.Collapse eventKey="0">
        <QueryForm
            baseEndpoint={this.props.baseEndpoint}
            tagsInitialValues={this.state.searchParams.tags}
            textInitialValue={this.state.searchParams.description}
            setSearchParams={this.setSearchParams}
        />
    </Accordion.Collapse>
</Accordion>

Ele funciona perfeitamente para breakpoints maiores, mas, para dispositivos pequenos a QueryForm aparece na direção oposta e sobre o conteúdo da página.

Dê uma olhada no sandbox: https://codesandbox.io/s/0y8cm

(clique em ‘Mais filtros’ para ativar o Accordion e veja o breakpoint problemático quando o toggle da navbar aparecer)

O que estou fazendo de errado?

Muito obrigado!