Sticky header in react

In my react project I write a code for adjust my table header as sticky header. Table is in the middle of the page. So, sticky header is working, but it gave new scroll bar to the table and with that scroll bar sticky header work. Page have another scroll bar. So, that there are two scroll bar. It's not good UI. So, I need one scroll bar for page and when I scroll down table head has to be stick on the top. Please help. How can I do this?

This is the code:

enter image description here

enter image description here

In my react project I write a code for adjust my table header as sticky header. Table is in the middle of the page. So, sticky header is working, but it gave new scroll bar to the table and with that scroll bar sticky header work. Page have another scroll bar. So, that there are two scroll bar. It's not good UI. So, I need one scroll bar for page and when I scroll down table head has to be stick on the top. Please help. How can I do this?