I’m using the @jaredreisinger/react-crossword library in a React project to create a crossword puzzle. I need to navigate users to a success page only if all the answers in the crossword are correct. Currently, my application navigates to the success page regardless of whether the answers are correct or not. I am unsure how to properly check if all answers are correct using the CrosswordImperative interface.

import React, {FC, useCallback, useEffect, useRef, useState} from 'react';
import {BackHomeButton} from "../BackToHomeButton/BackHomeButton";
import { useNavigate } from 'react-router-dom';
import "./Crossword.css";
import Crossword, {AnswerTuple, CrosswordImperative} from '@jaredreisinger/react-crossword';

const data = {
    across: {
        2: {
            clue: 'Technologie zur Darstellung von medizinischen Bildern wie beispielsweise Röntgenaufnahmen',
            answer: 'PACS',
            row: 8,
            col: 10,
        },
        
    },
    down: {
        
     
       
        9: {
            clue: 'Klassifikationssystem für ein pauschaliertes Abrechnungsverfahren, mit dem Krankenhausfälle anhand von medizinischen Daten Fallgruppen zugeordnet werden',
            answer: 'DRG',
            row: 11,
            col: 8,
        },
    },
};


const sharedStyle = {
    backgroundPosition: 'center',
    backgroundRepeat: 'no-repeat',
    display: 'flex',
    alignItems: 'center',
    border: '2px', // Rahmenstil
    borderRadius: '10px', // abgerundete Ecken
    color: 'rgb(139,0,0)',
    fontSize: '20px',
    allowNonSquare: true,
    textColor: '#fff',
    numberColor: '#034F18'
};




const CrosswordComponent: FC = () => {
    const crosswordRef = useRef<CrosswordImperative>(null);
    const navigate = useNavigate();

    const handleCrosswordComplete = () => {
        setTimeout(() => {
            navigate('/CrosswordSucces');  // Umleiten zur Erfolgsseite nach einer Sekunde
        }, 1000); // 1000 Millisekunden entsprechen einer Sekunde
    };


    return (
        <div className="crossword_background">
            <h1>Kreuzworträtsel</h1>
            <div style={sharedStyle}>
                <Crossword data={data} theme={{
                    numberColor: '#034F18',
                    gridBackground: 'none',
                    highlightBackground: '#FCD8A8',
                    focusBackground: '#778563',
                }} acrossLabel="Horizontal" downLabel="Vertikal" onCrosswordCorrect={handleCrosswordComplete} ref={crosswordRef} />
            </div>
            <button onClick={() => crosswordRef.current?.reset()}>
                Zurücksetzen
            </button>
            <BackHomeButton/>
        </div>
    );
};

export default CrosswordComponent;

I have tried something like this but it didnt help at all.

    const handleCrosswordComplete = () => {
        if (Object.values(correctAnswers).every(status => status)) {
            navigate('/CrosswordSuccess');
        } else {
            alert('Some answers are incorrect, please review your answers.');
        }
    };

Really need help at this