Why setTest only works with a callback deep explanation if possible?

Question

When I was playing around with MUIDataTable I find out that function tester(){}(check hooks code below) works only with useState callback method, with a regular call it just works only once I really tried to figure out why this is happening but no result so far if you are someone who faced a similar issue like this or a someone who knows the reasoning behind it please enlighten me.

Tried with class-based component works fine with or without callback for setState but in a hooks-based component, it works only with a callback. FYI: I know that if we use a callback in a hook it queues-up which help us to avoid the same hook to be replaced with the old hook when invoked sequentially.

code with hooks

import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";
import MUIDataTable from "mui-datatables";
import Tooltip from "@material-ui/core/Tooltip";
import EditIcon from "@material-ui/icons/Create";
import IconButton from "@material-ui/core/IconButton";

const fakeCols = ["Name", "Company", "City", "State"];
const fakeRows = [
  ["Joe James", "Test Corp", "Yonkers", "NY"],
  ["John Walsh", "Test Corp", "Hartford", "CT"],
  ["Bob Herm", "Test Corp", "Tampa", "FL"],
  ["James Houston", "Test Corp", "Dallas", "TX"]
];

export default function MUITable(props) {
  const [columns, setColumns] = useState(
    props.columns ? props.columns : fakeCols
  );
  const [test, setTest] = useState(false);
  const [rows, setRows] = useState(props.rows ? props.rows : fakeRows);
  const addRow = () => {
    setRows([
      ...rows,
      ["Joe James", "Test Corp", "Yonkers", "NY"],
      ["John Walsh", "Test Corp", "Hartford", "CT"],
      ["Bob Herm", "Test Corp", "Tampa", "FL"],
      ["James Houston", "Test Corp", "Dallas", "TX"]
    ]);
  };
  const tester = () => {
    console.log(test);
    // setTest(test => !test); THIS WORKS
      //  setTest(!test)  THIS DOES NOT WORKS
    // console.log(rows[selectedRows.data[0].dataIndex]);
  };
  const options = {
    filterType: "select",
    selectableRows: "single",
    onRowsSelect: data => {
      console.log(data);
    },
    textLabels: {},
    customToolbarSelect: selectedRows => (
      <Tooltip title="edit">
        <IconButton
          onClick={tester}
          style={{
            marginRight: "24px",
            height: "48px",
            top: "50%",
            display: "block",
            position: "relative",
            transform: "translateY(-50%)"
          }}
        >
          <EditIcon />
        </IconButton>
      </Tooltip>
    )
  };
  return (
    <div>
      {test ? <button onClick={addRow}>test</button> : null}
      <MUIDataTable data={rows} columns={columns} options={options} />
    </div>
  );
}

code with classes

import React, { Component } from "react";
import PropTypes from "prop-types";
import MUIDataTable from "mui-datatables";
import Tooltip from "@material-ui/core/Tooltip";
import EditIcon from "@material-ui/icons/Create";
import IconButton from "@material-ui/core/IconButton";

const fakeCols = ["Name", "Company", "City", "State"];
const fakeRows = [
  ["Joe James", "Test Corp", "Yonkers", "NY"],
  ["John Walsh", "Test Corp", "Hartford", "CT"],
  ["Bob Herm", "Test Corp", "Tampa", "FL"],
  ["James Houston", "Test Corp", "Dallas", "TX"]
];
export default class MUITable extends Component {
  state = {
    columns: ["Name", "Company", "City", "State"],
    rows: [
      ["Joe James", "Test Corp", "Yonkers", "NY"],
      ["John Walsh", "Test Corp", "Hartford", "CT"],
      ["Bob Herm", "Test Corp", "Tampa", "FL"],
      ["James Houston", "Test Corp", "Dallas", "TX"]
    ],
    test: false
  };
  tester = () => {
    console.log(this.state.test);
    this.setState({ test: !this.state.test });
    console.log(this.state.test);
  };
  render() {
    const options = {
      filterType: "select",
      selectableRows: "single",
      onRowsSelect: data => {
        console.log(data);
      },
      textLabels: {},
      customToolbarSelect: selectedRows => (
        <Tooltip title="edit">
          <IconButton
            onClick={this.tester}
            style={{
              marginRight: "24px",
              height: "48px",
              top: "50%",
              display: "block",
              position: "relative",
              transform: "translateY(-50%)"
            }}
          >
            <EditIcon />
          </IconButton>
        </Tooltip>
      )
    };
    return (
      <div>
        {this.state.test ? <button>test</button> : null}
        <MUIDataTable
          data={this.state.rows}
          columns={this.state.columns}
          options={options}
        />
      </div>
    );
  }
}