Adding in react components to a next js Project

Question

I've been trying to add certain components from my React project to me Next js project. I'm getting an error with a certain component saying:

Unhandled Runtime Error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of TableContainer.

The component corresponding to this is:

 - TableContainer.js

  

  import React, { Fragment } from "react";
    import classes from './TableContainer.module.css';
    import {
      useTable,
      useGlobalFilter,
      useSortBy,
      useFilters,
      useExpanded,
      usePagination,
    } from "react-table";
    import { Table, Row, Col, Button, Input, CustomInput } from "reactstrap";
    import { Filter, DefaultColumnFilter } from "./filters";
    import { GlobalFilter } from "./GlobalFilter";
        
        const TableContainer = ({ columns, data, renderRowSubComponent }) => {
          const {
            getTableProps,
            getTableBodyProps,
            headerGroups,
            page,
            prepareRow,
            visibleColumns,
            canPreviousPage,
            canNextPage,
            pageOptions,
            pageCount,
            gotoPage,
            nextPage,
            previousPage,
            setPageSize,
            state: { pageIndex, pageSize },
            state,
            setGlobalFilter,
          } = useTable(
            {
              columns,
              data,
              defaultColumn: { Filter: DefaultColumnFilter },
              initialState: { pageIndex: 0, pageSize: 20 },
            }, 
            useGlobalFilter,
            useFilters,
            useSortBy,
            useExpanded,
            usePagination
          );
        
          const {globalFilter} = state
        
          const generateSortingIndicator = (column) => {
            return column.isSorted ? (column.isSortedDesc ? " 🔽" : " 🔼") : "";
          };
        
          const onChangeInSelect = (event) => {
            setPageSize(Number(event.target.value));
          };
        
          const onChangeInInput = (event) => {
            const page = event.target.value ? Number(event.target.value) - 1 : 0;
            gotoPage(page);
          };
        
          return (
            <div>
              <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter}/>
            {/* <Fragment> */}
              <div className="data">
                <div className="up">
                {/* <Table className="dataheading">
                
                 {headerGroups.map((headerGroup) => (
                   <tr>
                     {headerGroup.headers.map((column) => (
                       <th>
                         <Filter column={column} />
                       </th>
                     ))}
                   </tr>
                 ))}
                
                </Table> */}
                </div>
              <Table bordered hover {...getTableProps()}>
                <thead>
                 
                  {headerGroups.map((headerGroup) => (
                    <tr {...headerGroup.getHeaderGroupProps()}>
                      {headerGroup.headers.map((column) => (
                        <th {...column.getHeaderProps()}>
                          <div {...column.getSortByToggleProps()}>
                            {column.render("Header")}
                            {generateSortingIndicator(column)}
                          </div>
                          <Filter column={column} />
                        </th>
                      ))}
                    </tr>
                  ))}
                  
                </thead>
                {/* <div  className="data"> */}
                <tbody {...getTableBodyProps()} style={{ minWidth: 200}}>
                  {page.map((row) => {
                    prepareRow(row);
                    return (
                      <Fragment key={row.getRowProps().key}>
                        <tr>
                          {row.cells.map((cell) => {
                            return (
                              <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                            );
                          })}
                        </tr>
                        {row.isExpanded && (
                          <tr>
                            <td colSpan={visibleColumns.length}>
                              {renderRowSubComponent(row)}
                            </td>
                          </tr>
                        )}
                      </Fragment>
                      
                    );
                  })}
                </tbody>
                {/* </div> */}
              </Table>
              
              </div>
              
              <div className="footer">
                <div className="footer-data">
                <Row style={{ maxWidth: 800, minWidth: 200,margin: "0 auto", textAlign: "center" }}>
                  <Col>
                    {/* <Button
                    color='primary'
                    onClick={() => gotoPage(0)}
                    disabled={!canPreviousPage}
                  >
                    {'<<'}
                  </Button> */}
                    <Button
                      color="danger"
                      onClick={previousPage}
                      disabled={!canPreviousPage}
                    >
                      {"<"}
                    </Button>
                  </Col>
                  <Col style={{ marginTop: 7 }}>
                    Page{" "}
                    <strong>
                      {pageIndex + 1} of {pageOptions.length}
                    </strong>
                  </Col>
                  <Col>
                    <Input
                      type="number"
                      min={1}
                      style={{ width: 70}}
                      max={pageOptions.length}
                      defaultValue={pageIndex + 1}
                      onChange={onChangeInInput}
                    />
                  </Col>
                  <Col>
                    <CustomInput
                      type="select"
                      value={pageSize}
                      onChange={onChangeInSelect}
                    >
                      {[20, 30, 40, 50].map((pageSize) => (
                        <option key={pageSize} value={pageSize}>
                          Show {pageSize}
                        </option>
                      ))}
                    </CustomInput>
                  </Col>
                  <Col >
                    <Button color="danger" onClick={nextPage} disabled={!canNextPage}>
                      {">"}
                    </Button>
                    {/* <Button
                    color='primary'
                    onClick={() => gotoPage(pageCount - 1)}
                    disabled={!canNextPage}
                  >
                    {'>>'}
                  </Button> */}
                  </Col>
                </Row>
                </div>
              </div>
            </div>
          );
        };
        export default TableContainer;

---

Any idea what the issue might be?