Reactjs - Error: Objects are not valid as a React child (found: object with keys {type, data})

I am trying to display mysql data to a table using nodejs and reactjs. For some reasom I keep the folowing error:

Error: Objects are not valid as a React child (found: object with keys {type, data}). If you meant to render a collection of children, use an array instead.

Nodejs backend is as follows:

app.get("/companymst", (req, res) => {
  db.query("SELECT * FROM companymst", (err, result) => {
    console.log(err);
    res.send(result);
  });
});

React front-end is as follows:

import { useEffect, useState } from "react";
import { Button, Container, Row, Table } from "react-bootstrap";
import axios from "axios";

const AllCompanies = () => {
  const [companies, setCompanies] = useState([]);

  useEffect(() => {
    axios.get("http://localhost:8000/companymst").then((response) => {
      setCompanies(response.data);
    });
  }, []);

  return (
    <div className="App">
      <div className="auth-wrapper">
        <div className="auth-inner">
          <Container className="container-chirag">
            <Row className="chirag-test">
              <Table striped bordered hover size="sm">
                <thead>
                  <tr>
                    <th>CompanyCode</th>
                    <th>CompanyName</th>
                    <th>Address1</th>
                    <th>Address2</th>
                    <th>PoBox</th>
                    <th>City</th>
                    <th>Province</th>
                    <th>Country</th>
                    <th>Phone</th>
                    <th>Fax</th>
                    <th>Email</th>
                    <th>RegistrationNo</th>
                    <th>VatNo</th>
                    <th>PinNo</th>
                    <th>BranchNo</th>
                    <th>BranchHq</th>
                    <th>StartDate</th>
                    <th>EndDate</th>
                    <th>Current</th>
                    <th>RunDate</th>
                    <th>DateCreated</th>
                    <th>UserID</th>
                    <th>LocationID</th>
                    <th colSpan="2">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {companies.map((val) => {
                    return (
                      <tr>
                        <td>{val.CmpnyCode}</td>
                        <td>{val.CmpnyName}</td>
                        <td>{val.Address1}</td>
                        <td>{val.Address2}</td>
                        <td>{val.PoBox}</td>
                        <td>{val.City}</td>
                        <td>{val.Province}</td>
                        <td>{val.Country}</td>
                        <td>{val.Phone}</td>
                        <td>{val.Fax}</td>
                        <td>{val.Email}</td>
                        <td>{val.RegistrationNo}</td>
                        <td>{val.VatNo}</td>
                        <td>{val.PinNo}</td>
                        <td>{val.BranchNo}</td>
                        <td>{val.BranchHq}</td>
                        <td>{val.StartDate}</td>
                        <td>{val.EndDate}</td>
                        <td>{val.Current}</td>
                        <td>{val.RunDate}</td>
                        <td>{val.DateCreated}</td>
                        <td>{val.UserID}</td>
                        <td>{val.LocationID}</td>
                        <td>
                          <Button variant="info">Edit</Button>
                        </td>
                        <td>
                          <Button variant="danger">Delete</Button>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </Table>
            </Row>
          </Container>
        </div>
      </div>
    </div>
  );
};

export default AllCompanies;

This is the response being sent from mybackend to port 8000: [{"CmpnyCode":"2","CmpnyName":"Comapny1","Address1":"Address1","Address2":"Address2 at sth","PoBox":"359","City":"Nairobi","Province":"Nairobi","Country":"Kenya","Phone":"0722811500","Fax":"0773596252","Email":"[email protected]","RegistrationNo":"AK54864651","VatNo":"A021547648464","PinNo":"AB215486546","BranchNo":"45","BranchHq":"Nk","StartDate":"2021-01-02T19:55:57.000Z","EndDate":"2021-07-07T19:55:57.000Z","Current":{"type":"Buffer","data":[1]},"RunDate":"2021-07-04T19:55:57.000Z","DateCreated":"2020-08-05T19:55:57.000Z","UserID":"7895","LocationID":"789564"}]

Console.log(response) is as follows:

{data: Array(1), status: 200, statusText: "OK", headers: {…}, config: {…}, …} config: {url: "http://localhost:8000/companymst", method: "get", headers: {…}, transformRequest: Array(1), transformResponse: Array(1), …} data: [{…}] headers: {content-length: "570", content-type: "application/json; charset=utf-8"} request: XMLHttpRequest {readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, onreadystatechange: ƒ, …} status: 200 statusText: "OK" proto: Object

I have been trying to figure out the issue for a whole week but no luck.

If someone can help me figure out the issue with my code, that'd be great.