react セレクトボックスのプルダウンを前面に表示するようにしたい

Question

開発環境はreact.js, typescript, next.js, styled-componentsを使っています。

セレクトボックスのコードは以下になります。
https://codesandbox.io/s/q289304-t4z0w?file=/src/SelectDate.tsx

上記のコードのSelectDateの下にdivタグを用意してSelectDateのプルダウンを表示するとdivタグの上にプルダウンが重ならず下にずれてしまいます。SelectDateにz-indexをつけましたが前面に表示されませんでした。
プルダウンが前面に表示されるにはどうしたらいいでしょうか？
わかる人いましたらご教授お願いしたいです。

<SelectDate>//省略</SlelectDate>
<div>テスト</div>