How to make footer align to center in nested component scenario in React

columns: [
           {                 
              accessor: "firstName",
              Header: () => (
                    <div
                      style={{
                        textAlign:"right"
                      }}
                    >S Column 1</div>)
           },

Cell: row => <div style={{ textAlign: "center" }}>{row.value}</div>

const columns = [{
  Header: 'Column 5',
  accessor: 'name',
  headerClassName: 'your-class-name'
},
{
......
}
]

import ReactTable, {ReactTableDefaults} from 'react-table';

const columnDefaults = {...ReactTableDefaults.column, headerClassName: 'text-left-classname'}

<ReactTable
 ...
 ...
 columns = { columnDefaults }
 />

.center {
    display: flex;
    justify-content: center;
    align-items: center;
    height:100vh;  
}

.FieldsStyle {
    display: flex;
    flex-direction: row;
    flex-group: 1;
    justify-content: center;
}