Soy nuevo para reaccionar js. Estoy tratando de congelar el encabezado cuando el usuario se desplaza por la página. Me di cuenta de que, cuando elimino la opción de desbordamiento, la posición fija del encabezado parece estar funcionando, pero cuando tengo la opción de desbordamiento, la posición fija no funciona. y quiero la opción de desbordamiento, sin la cual mi contenedor de tabla se desborda en la página, y así es como se ve mi código css: ¿Me estoy perdiendo algo aquí? Cualquier ayuda es muy apreciada.

 .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; }