useState/State unable to hold data on page refresh - React

Question

The problem is when page is load through npm run dev command console.log(filter) show the data but as soon as I refresh the page all the data disappears and empty array is shown []

import "react-table-filter/lib/styles.css";

const TableFilter = dynamic(() => import('react-table-filter'), {
    ssr: false
});

function EventLog({ fullRecords }) {

 const [filter, filterData] = useState(fullRecords);
    console.log(filter);

    const elementsHtml = filter.map((item, index) => {
        return (
            <tr key={"row_" + index}>
                <td className="cell">{datetimestring(item.datetime)}</td>
                <td className="cell">{item.level}</td>
                <td className="cell">{item.code}</td>
                <td className="cell">{item.message}</td>
            </tr>
        );
    });
    const filterUpdateHandler = (newRecords, filtersObject) => {
        filterData(newRecords)
    }
    return (
          <table>
                <thead>
                    <TableFilter rows={filter} onFilterUpdate={filterUpdateHandler}>
                        <th key="date">Date</th>
                        <th key="level" filterkey="level" className="cell">Level</th>
                        <th key="code">Code</th>
                        <th key="message">Message</th>
                    </TableFilter>
                </thead>
                <tbody>
                    {elementsHtml}
                </tbody>
            </table>
     )

Samething is happening if I use class component

import React, { Component } from 'react';
// import TableFilter from 'react-table-filter';
import dynamic from 'next/dynamic'

import "react-table-filter/lib/styles.css";

const TableFilter = dynamic(() => import('react-table-filter'), {
    ssr: false
})

function datetimestring(datetime) {
    const ts = new Date(datetime * 1000);
    return ts.toUTCString();
}

class EventLogTableFilter extends Component {

    constructor(props) {
        super(props)

        this.state = {
            records: this.props.records
        }
        console.log(this.props.records)
        this.filterUpdateHandler = this.filterUpdateHandler.bind(this);
    }
    filterUpdateHandler(newData, filtersObject) {
        this.setState({
            records: newData
        });
    }
    render() {
        const record = this.state.records;
        const elementsHtml = record.map((item, index) => {
            return (
                <tr key={"row_" + index}>
                    <td className="cell">{datetimestring(item.datetime)}</td>
                    <td className="cell">{item.level}</td>
                    <td className="cell">{item.code}</td>
                    <td className="cell">{item.message}</td>
                </tr>
            );
        });
        return (
            <table>
                <thead>
                    <TableFilter rows={this.state.records} onFilterUpdate={this.filterUpdateHandler}>
                        <th key="date">Date</th>
                        <th key="level" filterkey="level" className="cell">Level</th>
                        <th key="code">Code</th>
                        <th key="message">Message</th>
                    </TableFilter>
                </thead>
                <tbody>
                    {elementsHtml}
                </tbody>
            </table>
        )
    }
}

Can you please help I am unable to understand where I have gone wrong. Why useState() is not holding data after refresh.