Eu construo um protótipo usando a interface do usuário de chipQuando clico noTest IPA a caixa de texto deve aparecer imediatamente abaixo do texto Testar IPA. No protótipo, ele aparece imediatamente abaixo, mas, quando eu incluo outras funcionalidades, ele aparece na parte inferioEu depurei o CSS, devido à posição absoluta em cada cenário, mostrando valores diferentes e vindo da interface do usuário do materiaPode me dizer como corrigi-lo com relação a outros componente Fornecendo meu snippet de código, sandbox e captura de tela de erros abaix

Problema com outros componenteshttps: //codesandbox.io/s/qqqk23x3

Trabalhando adequadamente individualmentehttps: //codesandbox.io/s/1y2mvo0ol

JSX:

<td>
    <ChipsTextbox chipName="test IPA" />
</td>

<Menu id="simple-menu" open={open} onClose={this.handleClose}>
    <TextField onChange={this.onChange} onKeyDown={this.handleKeyPress} />
</Menu>

CSS:

.MuiPopover-paper-1706 {
    outline: none;
    position: absolute;
    min-width: 16px;
    max-width: calc(100% - 32px);
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 16px;
    max-height: calc(100% - 32px);
}