How to correctly initialize a function in React?

Question

React

Hello everyone, could you please tell me how to solve the following problem?
I have a certain component, above there is a control, when clicked, setState is triggered. I need to call the this.setScrollLeft() function in which I set the cleavage position to the selected node (ref) in this case.
Here is my implementation, but I'm sure there is a better solution:

import React from 'react';
import { ScoreCell, getScoreTheme } from 'components/scores';

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

        this.containerWidth = 198;

        this.data = this.props.data;
        this.playerResultRef = React.createRef();
    }

    componentDidMount() {
        this.element = this.playerResultRef.current;
        this.element.scrollLeft = this.containerWidth;
    }

    setScrollLeft = () => {
        if (this.element) {
            this.element.scrollLeft = this.containerWidth;
        }
    };

    playerResult = () => {
        if (this.data.playOffHoles) {
            return (
                this.data.playOffHoles.map((item, index) => {
                    return (
                        <div
                            className="leaderboard__player-result-row-wrapper"
                            key={index}
                        >
                            <div className="leaderboard__player-result-row">
                                <div className="leaderboard__player-result-cell">{item.holeId}</div>
                            </div>
                            <div className="leaderboard__player-result-row">
                                <div className="leaderboard__player-result-cell">{item.holePar}</div>
                            </div>
                            <div className="leaderboard__player-result-row">
                                <div className="leaderboard__player-result-cell leaderboard__player-result-cell--score">
                                    <ScoreCell
                                        childCss='tee-times-card__score'
                                        theme={getScoreTheme(item.playOffParScore)}
                                    >{item.playOffParScore}</ScoreCell>
                                </div>
                            </div>
                        </div>
                    );
                })
            );
        }
    };

    render() {
        console.log('LeaderboardPlayerResult render');
        this.setScrollLeft();
        return (
            <div
                className="leaderboard__player-result"
                ref={this.playerResultRef}
            >
                {this.playerResult()}
            </div>
        );
    }
}

export default LeaderboardPlayerResult;

Answer 1

https://reactjs.org/docs/hooks-reference.html#usestate
https://reactjs.org/docs/hooks-reference.html#useeffect
https://reactjs.org/docs/hooks-reference.html# userref