Data does not load when reloading the page, but when I click elsewhere and clink back to the component then the data fetches in datatable

I'm working with MDBDataTable for react and having trouble loading the data after reloading the page. But when I go to another component and visit back the TopSearchSelect component then the data gets loaded to the datatable.

[Data does not load when refreshing the page][1] [1]: https://i.stack.imgur.com/MArri.png [Data gets loaded when going to another component and then back][2] [2]: https://i.stack.imgur.com/TZxu6.png

TopSearchSelect.js

The getClients() is working and getting saved to redux store.

import React, { useState, useEffect, Fragment } from 'react';
import { MDBDataTableV5 } from 'mdbreact';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

import { getClients } from '../../actions/clients';


const TopSearchSelect = ({ clients, getClients }) => {

const [datatable, setDatatable] = useState([]);

useEffect(() => {
    getClients();
    setDatatable({
        columns: [
            {
                label: 'First Name',
                field: 'firstName',
                width: 150,
                attributes: {
                    'aria-controls': 'DataTable',
                    'aria-label': 'Name',
                },
            },
            {
                label: 'Last Name',
                field: 'lastName',
                width: 270,
            },
            {
                label: 'Phone',
                field: 'phone',
                width: 200,
            },
            {
                label: 'Email',
                field: 'email',
                sort: 'asc',
                width: 100,
            },
            {
                label: 'Date added',
                field: 'date',
                sort: 'disabled',
                width: 150,
            },

        ],
        rows: clients && clients.map(client => ({
            firstName: client.firstName,
            lastName: client.lastName,
            phone: client.phone,
            email: client.email,
            date: client.date,

        })) || []
    });

}, []);


return (

     <MDBDataTableV5
        hover
        entriesOptions={[5, 10, 20, 25]}
        entries={5}
        pagesAmount={4}
        data={datatable}
        pagingTop
        searchTop
        searchBottom={false}
     />

   );
  }

TopSearchSelect.propTypes = {
 getClients: PropTypes.func.isRequired,
  }

 const mapStateToProps = state => ({
  clients: state.clients.clients
});

export default connect(mapStateToProps, { getClients })(TopSearchSelect);

Clients.js

import React, { Fragment, useEffect } from 'react'
import TopSearchSelect from '../layout/TopSearchSelect';

const Clients = () => {

  return (
    <Fragment>
        <h1 class="h3 mb-4 text-gray-800">Clients</h1>
        <TopSearchSelect />
    </Fragment>

   )
 }

export default Clients;