React Redux with React Table

I'm trying to learn react table and react redux, which I can't search for something that references of them both using together, can someone provide an example that I can reference so I can implement it myself? TIA

This is my component so far, which doesnt give me an error and gets the redux state fine but does not render the data on the table.

function ResidentTable({ history }) {
  const dispatch = useDispatch();

  const userLogin = useSelector(state => state.userLogin);
  const { userInfo } = userLogin;

  const residentList = useSelector(state => state.residentList);
  const { loading, error, residents } = residentList;

  useEffect(() => {
    if (!userInfo || !userInfo.isAdmin) {
      history.push('/login');
    } else {
      dispatch(listResidents());
    }
  }, [dispatch, history]);

  const columns = useMemo(() => RESIDENT_COLUMNS, []);
  const data = useMemo(() => residents, []);
  const tableInstance = useTable(
    { columns, data },
    useFilters,
    useGlobalFilter,
    useSortBy,
    usePagination
  );
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    page,
    nextPage,
    previousPage,
    canNextPage,
    canPreviousPage,
    prepareRow,
  } = tableInstance;

  return (
    <Box p="2rem 8rem">
      <ModalResident />
      <Table
        size="lg"
        variant="striped"
        colorScheme="blackAlpha"
        {...getTableProps()}
      >
        <TableCaption placement="top">
          <Heading>Metroville Residents List</Heading>
        </TableCaption>
        <Thead>
          {headerGroups.map(headerGroup => (
            <Tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map(column => (
                <Th
                  fontSize="1.2rem"
                  fontFamily="Raleway"
                  {...column.getHeaderProps(column.getSortByToggleProps())}
                >
                  {column.render('Header')}
                  <Text as="span">
                    {column.isSorted ? (
                      column.isSortedDesc ? (
                        <ChevronDownIcon />
                      ) : (
                        <ChevronUpIcon />
                      )
                    ) : (
                      ''
                    )}
                  </Text>
                  <Box onClick={e => e.stopPropagation()}>
                    {column.canFilter ? column.render('Filter') : null}
                  </Box>
                </Th>
              ))}
            </Tr>
          ))}
        </Thead>
        <Tbody {...getTableBodyProps()}>
          {page.map(row => {
            prepareRow(row);
            return (
              <Tr {...row.getRowProps()}>
                {row.cells.map(cell => {
                  return (
                    <Td
                      fontSize="1 rem"
                      fontFamily="Raleway"
                      {...cell.getCellProps()}
                    >
                      {cell.render('Cell')}
                    </Td>
                  );
                })}
              </Tr>
            );
          })}
        </Tbody>
      </Table>
      <Flex justify="space-between" my="1rem">
        <Button disabled={!canPreviousPage} onClick={() => previousPage()}>
          <ArrowBackIcon />
          Prev
        </Button>
        <Button disabled={!canNextPage} onClick={() => nextPage()}>
          Next
          <ArrowForwardIcon />
        </Button>
      </Flex>
    </Box>
  );
}