Fixing table header and making the table body scroll in React

Question

Here is a code sandbox URL, which contains React code for a table component,

I want to make the header in this component fixed at the top and the table body to be scrollable. For that, I found an answer here. But if I make tbody as display: block and thead as display: table and do the changes as suggested in the above answer, then my table header columns won't align with my tbody columns, as attached in the screenshot here.

I want to make the header fixed at the top while the content of body should be scrollable and alignment shouldn't be disturbed. How can I achieve it? Can someone please help. Thanks a lot in advance.