th position sticky not working with when overflow is enabled? reactjs

Question

I am new to react js. I am trying to freeze the header when the user scrolls on the page. I noticed that, when I remove the overflow option, header sticky position seem to be working, but when i have the overflow option, sticky doesnt work. and I do want the overflow option, without which my table container is overflowing on the page, and this is how my css code looks like: Am I missing something here? any help is greatly appreciated.

.app-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 1rem;
  overflow-x: scroll;
}

table {
  table-layout: fixed;
  max-height: 200px;
  border-collapse: collapse;
  width: 500%;
}

th {
  position: sticky;
  top: 0;
  background: white;
  font-size: medium;
}