How to properly mitigate invalid hook issues in reactjs - 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