Minified react error on react-table when changing accessor conditionally

I have a data from an API and I want to display it in a table. So I decided to use react-table since its light-weight and is 'headless'. Now, I need to display multiple values with conditionals in one of the columns but I got this error instead:

Maximum update depth exceeded. This can happen when a component repeatedly calls setState 
inside componentWillUpdate or componentDidUpdate. React limits the number of nested 
updates to prevent infinite loops.

This is my code:

const columns = useMemo(() => [
    {
        Header: 'Id',
        accessor: 'station_id'
    },
    {
        Header: 'Type',
        accessor: 'type_name'
    },
    {
        Header: 'Location',
        accessor: 'location',
        Cell: (cell) => (
            <span>
              {cell.row.original.location},&nbsp;
              {(cell.row.original.barangay === null ? '' : (cell.row.original.barangay === "") ? '' : cell.row.original.barangay + ', ')} 
              {(cell.row.original.municipality === null ? '' : (cell.row.original.municipality === "") ? '' : cell.row.original.municipality + ', ')} 
              {cell.row.original.province}
            </span>
        )
    },
]);

const data = useMemo(() => stations, [])

const { 
    getTableProps, 
    getTableBodyProps, 
    headerGroups, 
    rows, 
    prepareRow, 
} = useTable({ columns, data })

return (
    <div>
          <table {...getTableProps()}>
            <thead>
              {headerGroups.map(headerGroup => (
                <tr {...headerGroup.getHeaderGroupProps()}>
                  {headerGroup.headers.map(column => (
                    <th {...column.getHeaderProps()}>{column.render('Header')}</th>
                  ))}
                </tr>
              ))}
            </thead>
            <tbody {...getTableBodyProps()}>
              {rows.map((row) => {
                prepareRow(row)
                return (
                  <tr {...row.getRowProps()}>
                    {row.cells.map((cell) => {
                      return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                    })}
                  </tr>
                )
              })}
              <tr>
                <td></td>
              </tr>
            </tbody>
          </table>
    </div>
)

And this is the sample of my data:

{
    "station_id": "0016782",
    "location": "l-1",
    "barangay": "Brgy-1",
    "municipality": "",
    "province": "RXI",
    "type_name": "P-Sensor",
},

Then I want the table to look like this:

    Id          |   Type        |   Location
    0016782     |   P-Sensor    |   l-1, Brgy-1, RXI

In your code, columns is missing dependency. It causes an error.

const columns = useMemo(() => [
    {
        Header: 'Id',
        accessor: 'station_id'
    },
    {
        Header: 'Type',
        accessor: 'type_name'
    },
    {
        Header: 'Location',
        accessor: 'location',
        Cell: (cell) => (
            <span>
              {cell.row.original.location},&nbsp;
              {(cell.row.original.barangay === null ? '' : (cell.row.original.barangay === "") ? '' : cell.row.original.barangay + ', ')} 
              {(cell.row.original.municipality === null ? '' : (cell.row.original.municipality === "") ? '' : cell.row.original.municipality + ', ')} 
              {cell.row.original.province}
            </span>
        )
    },
], []);