Почему я получаю сообщение об ошибке: «Превышена максимальная глубина обновления» при попытке сортировки таблицы?

Question

Я пытаюсь отсортировать таблицу, но получаю ошибку при попытке использовать функцию в рендере.Это мой фрагмент кода:

/*index.jsx*/
import React, {Component,  useState } from 'react';
//Functional Component
const Row = ({id, spec, qNumber,i}) => (
    <tr>
        <th key={i} id={id} scope={"row"}>{i}</th>
        <td key={spec} id={id}>{spec}</td>
        <td key={qNumber} id={id}>{qNumber}</td>
    </tr>
);

class LightBoardPage extends Component{
    constructor(props){
        super(props);
        this.state = {
            list: [],
            error: null,
            loaded: false
        }
        this.compareBy.bind(this);
        this.sortBy.bind(this);
    }

    buildList =(data)=>{
        console.log(data);
        this.setState({list: data})
    }

    componentDidMount(){
        console.log('did mount')
        let url = './data.json';
        fetch(url)
            .then(response => response.json())
            .then(this.buildList)
            .catch(error => {
                this.setState({error});
            })
    }


    compareBy(key) {
        return function (a, b) {
            if (a[key] < b[key]) return -1;
            if (a[key] > b[key]) return 1;
            return 0;
        };
    }


    sortBy(key) {
        let arrayCopy = [...this.state.list];
        arrayCopy.sort(this.compareBy(key));
        this.setState({list: arrayCopy});
    }

    render(){
        const rows = this.state.list.map( (rowData) => <Row {...rowData}/>);
        console.log('render');
        let o=0;
        return (
            <div >
                {this.sortBy('spec')}
                <table className="table table-hover">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>Specialistas</th>
                        <th>Eilės numeris</th>
                    </tr>
                    </thead>
                    <tbody>

                    {rows}

                    </tbody>
                </table>
                {this.state.error &&
                <h3>{this.state.error}</h3>
                }
                </div>
        )
    }
}
export default LightBoardPage;

Если я использую sortBy () с "onClick", он работает, но в противном случае я получаю эту ошибку: Ошибка

Я новичокЯ не знаю, что я могу сделать, чтобы сортировка работала.Так, что я мог сделать, чтобы сделать эту ошибку непоследовательной?

PS Это мой код: Код