React js Navigate on click of MUIDatatable anchor tag

Question

I am using react js to develop my project.I am using React MUIDatatable to bind the data, which I am receiving from API as shown below. I am facing issue, when trying to call click function On_Click_Data on particular row [client_id], Where I am calling another API Get_Client_Details and navigate to client_details page and bind data.

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

//get employee info.
function GetEmployeeInfo() {
  let [loading, setLoading] = useState(true);
  const [EmployeeResponse, setEmployee] = useState([]);
  const [ClientInfo, set_Client_Info] = useState("");
  const [on_click_data, set_on_click_data] = useState("");

  //get employees details, calling the API.

  const getEmployee = () => {
    axios.get(configData.SERVER_URL + `/api/getEmployee`).then((res) => {
      setEmployee(res.data);
      setLoading(false);
    });
  };

  useEffect(() => {
    getEmployee();
  }, []);

  //grid client_id onClick.

  function On_Click_Data(e, data) {
    e.preventDefault();
    try {
      set_on_click_data(data);
      Get_Client_Details(data);
    } catch (e) {
      alert(e.message);
    }
  }

  //get the client info.
  const Get_Client_Details = (data) => {
    try {
      axios
        .post(
          configData.SERVER_URL + `/api/get_client_info?client_ID=${data.val}`
        )
        .then((res) => {
          set_Client_Info(res);
          navigate_client_page(res);
        });
    } catch (e) {
      alert(e.message);
    }
  };

  //using the history, to navigate to different page and component.

  const navigate_client_page = (data) => {
    const history = useHistory();
    history.push({
      pathname: "/client_details",
      state: { data },
    });
  };

  useEffect(() => {
    if (on_click_data !== null && on_click_data !== "") {
      Get_Client_Details(on_click_data);
    }
  }, [on_click_data]);

  if (loading === true) {
    return (
      <div style={style}>
        <span>Still loading...</span>
      </div>
    );
  } else {
    const columns = [
      {
        label: "Employee_id",
        name: "employeeID",
      },
      {
        label: "Name",
        name: "employee_name",
      },
      {
        label: "client",
        name: "clientID",
        options: {
          customBodyRender: (val) => {
            return (
              <div style={{ position: "relative", height: "20px" }}>
                <div style={parentStyle}>
                  <div style={cellStyle}>
                    <a href="#" onClick={(e) => On_Click_Data(e, { val })}>
                      {val}
                    </a>
                  </div>
                </div>
              </div>
            );
          },
        },
      },
    ];

    const data = EmployeeResponse.map((item) => {
      return [item.employeeID, item.employee_name, item.clientID];
    });

    return (
      <MUIDataTable title={"Employee Info"} data={data} columns={columns} />
    );
  }
}

client_details, its different page.

function Client_details() {
    const history = useHistory();
    let [client_details, set_Client_Details] = useState();
    useEffect(() => {
      let res = history.location.state;
      set_Client_Details(result);
    }, []);

    return (
        <>
          //I want to bind data which i get from the state and render it.
        </>
    )
}

I am using below version of react js

    "react": "^17.0.2",
    "react-bootstrap": "^1.6.4",
    "react-dom": "^17.0.2",
    "react-router-bootstrap": "^0.25.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",