Проблема с useParams в @reach/router: Object(...) is not a function

Существует вот такой вот код:

import React, { Component } from 'react';
import ItemDetails, {Field} from '../../itemDetails';
import GotService from '../../../services/gotService';
import { useParams } from '@reach/router';

class CharacterItem extends Component {
    
    gotService = new GotService();

    state = { 
        selectedChar: 130,
        error: false
    }

    render() { 

        const params = useParams();
        console.log(params);

        return ( 
            <ItemDetails 
                itemId = {this.state.selectedChar}
                getData={this.gotService.getCharacter}>
                    <Field field='gender' label='Gender' />
                    <Field field='born' label='Born' />
                    <Field field='died' label='Died' />
                    <Field field='culture' label='Culture' />
            </ItemDetails>
         );
    }
}
 
export default CharacterItem;

Однако Реакт выдает мне следующую ошибку:

Абсолютно не понимаю причину этой ошибки. Реакт установлен новой версии, импорт useParams правильный.

Помогите пожалуйста разобраться в проблеме