La propiedad Sticky oculta elementos que se desbordan (React + Material UI)

Buenas tardes, estoy haciendo una interfaz de evento de usuario en la que quiero desplazarme hacia abajo y mantener la cabecera (eventos) fija en la parte superior. El problema es que cuando agrego la propiedad de fijar, los nombres de los eventos son cubiertos por su hermano derecho.
Esto es con fijación:

Y esto sin ella (los nombres diagonales se muestran como se espera, pero por supuesto, la cabecera no se fija en la parte superior al desplazarse)

JSX:

{props.permissions.map((permission) => (

))}:

JS-CSS:

blank: {
position: ‘sticky’,
top: ‘0’,
zIndex: 20,
backgroundColor: ‘#fff’,
},
header: {
position: ‘sticky’,
top: ‘0’,
background: ‘white’,
zIndex: 20,
padding: 0,
height: ‘140px’,
whiteSpace: ‘nowrap’,
borderBottom: ‘1px solid #ccc’,
backgroundColor: ‘lightgreen’,
overflow: ‘visible’,
},
headerInner: {
transform: ‘translate(17px,45px) rotate(310deg)’,
width: ’30px’,
backgroundColor: ‘red’,
},
headerInnerSpan: {
width: ‘100%’,
backgroundColor: ‘yellow’,
overflow: ‘visible’,
},

Intenté mover las propiedades hacia TableRow, pero obtuve los mismos resultados.

EDITAR
Creé un Codepen para facilitar la depuración. El problema es que no puedo establecer las clases de encabezado y en blanco como fijas.

Principales problemas a solucionar:
1) Los elementos se superponen, por lo que no puedo leer los nombres diagonales en la barra de encabezado.
2) La barra de encabezado y el contenedor en blanco deberían fijarse en la parte superior al desplazarse.

¡Gracias de antemano!