How to properly mitigate invalid hook issues in reactjs

Question

Am trying to display my records from airtable.com using reactjs but it throws error

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:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

I have reference solution found here link

I change the Rec class to function and then try to export it but still cannot get it to work

here is the code

import {initializeBlock, useBase, useRecords} from '@airtable/blocks/ui';
import React, { Component } from "react";
import ReactDOM from 'react-dom';

class Rec extends React.Component{
    constructor(props) {
        super(props);

        this.state = {
            id: ''
        };
    }


myRecords() {
alert('ok');

 const base = useBase();
 const table = base.getTableByNameIfExists('myfirst_table');
 // grab all the records from that table
 const records = useRecords(table);
// render a list of records:
     return (
         <ul>
             {records.map(record => {
                 return <li key={record.id}>{record.id} </li>
             })}
         </ul>
     );


    render() {
        return (
          <div>
             <h2>My Records</h2>

{this.myRecords()}
          </div>
        );
    }
}

export default Rec;

UPDATED SECTION WITH SOLUTION BY MR. HAGAI

class Rec extends React.Component{
    constructor(props) {
        super(props);

        this.state = {
            id: ''
        };
    }


myRecords() {
alert('ok');
 //const base = useBase();
 //const table = base.getTableByNameIfExists('myfirst_table');
 // grab all the records from that table
 //const records = useRecords(table);
// render a list of records:
     return (
         <ul>
             {records.map(record => {
                 return <li key={record.id}>{record.id} </li>
             })}
         </ul>
     );

 }
    render() {
        return (
          <div>
             <h2>Hello welcome to contact page</h2>


 {this.myRecords()}
          </div>
        );
    }
}

export default () => {
    const base = useBase();
    const table = base.getTableByNameIfExists('myfirst_table');
    const records = useRecords(table);
    return <Rec base={base} records={records} />
}
//export default Rec;

Answer 1

useBase and useRecords hooks can't be called inside a class component, but there is a little workaround you can do for not re-write code by export arrow function that will pass base and records as props

class Rec extends React.Component{
  ...rest class without useBaes() and useRecords() assiganing... 
}

export default (props) => {
    const base = useBase();
    const table = base.getTableByNameIfExists('myfirst_table');
    const records = useRecords(table);
    return <Rec {...props} base={base} recoreds={records} />
}

now base available at this.props.base and no hook called inside a class component