class CustomTOCItem extends ReactSurveyElement {
    constructor(props) {
        super(props);
    }
    render() {
        const survey = this.props.model.locOwner;
        const pageName = this.props.item.id;
        const page = survey.getPageByName(pageName);
        
        const pageQuestions = page.questions;
        const totalNumberOfQuestions = pageQuestions.length;
        const answeredQuestionsPerPage = pageQuestions.filter(question => !question.isEmpty()).length;

        const text = page.title || page.name;
        const content = (
            <span>
                {text} {" (Answered "}
                <strong>{answeredQuestionsPerPage}</strong>
                {"/"}
                <strong>{totalNumberOfQuestions}</strong>
                {")"}
            </span>
        );

        const backgroundClass =
            answeredQuestionsPerPage === 0
                ? "no-answered"
                : answeredQuestionsPerPage === totalNumberOfQuestions
                    ? "all-answered"
                    : "some-answered";

        return (
            <div className={`toc-item-container ${backgroundClass}`}>
                {content}
            </div>
        );
    }
}

ReactElementFactory.Instance.registerElement("sv-custom-toc-item", (props) => {
    return React.createElement(CustomTOCItem, props);
});
//...
survey.findLayoutElement("toc-navigation").getData().listModel.itemComponent = "sv-custom-toc-item";

survey.tocItemComponent = "sv-custom-toc-item";