Как сохранять данные о всех попытках теста пользователем?

import React, { useState, useEffect } from 'react';
import '../styles/Test1.css';
import { getDatabase, ref, set, get } from "firebase/database";
function writeUserData(userId, score) {
    const db = getDatabase();
    set(ref(db, 'users/' + userId), {
      scores: score,});}
function readUserData(userId) {
    const db = getDatabase();
    const userRef = ref(db, 'users/' + userId + '/scores');
    return get(userRef).then((snapshot) => {
        if (snapshot.exists()) {
            return snapshot.val();} else {return null;}}).catch((error) => {
        console.error('Error getting scores:', error);
        return null;});}
const Test1 = () => {
    const [answers, setAnswers] = useState({
        question1: [], question2: [] });
    const [userScores, setUserScores] = useState(null);
    const [loading, setLoading] = useState(true);
    const fetchData = async () => {try {const scores = await readUserData('userId');
            setUserScores(scores);} catch (error) {} finally {
            setLoading(false);}};
    useEffect(() => {
        fetchData();}, []);
    const [score, setScore] = useState(0);
    const [formSubmitted, setFormSubmitted] = useState(false);
    const [errors, setErrors] = useState([]);
    const handleCheckboxChange = (e, question) => {
        if (!formSubmitted) {
            const selectedAnswers = [...answers[question]];
            if (e.target.checked) {
                selectedAnswers.push(e.target.value);
            } else {
                const index = selectedAnswers.indexOf(e.target.value);
                if (index > -1) {
                    selectedAnswers.splice(index, 1);
                }
            }
            setAnswers({ ...answers, [question]: selectedAnswers });
        }};
    const handleSubmit = async () => {
        let totalScore = 0;
        let errorQuestions = [];
 
        if (answers.question1.includes('answer1') && answers.question1.includes('answer2')) {
            totalScore++;
        } else {
            errorQuestions.push('question1');
        }
        if (answers.question2.includes('answer3') && answers.question2.includes('answer4')) {
            totalScore++;
        } else {
            errorQuestions.push('question2');
        }
        setScore(totalScore);
        setErrors(errorQuestions);
        setFormSubmitted(true); 
        writeUserData('userId', totalScore);       
        const scores = await readUserData('userId');
        setUserScores(scores);
    };
    return (
        <div className="test-container">
            <h2>Тест</h2>
            <div className="checkbox-container">
                <h3 style={{ color: errors.includes('question1') ? 'red' : 'black' }}>Вопрос 1: Что такое React?</h3>
                <label style={{ display: 'flex', alignItems: 'center' }}>
                    Библиотека <input type="checkbox" value="answer1" onChange={(e) => handleCheckboxChange(e, 'question1')} disabled={formSubmitted} />
                </label>
                <label style={{ display: 'flex', alignItems: 'center' }}>
                    Фреймворк <input type="checkbox" value="answer2" onChange={(e) => handleCheckboxChange(e, 'question1')} disabled={formSubmitted} />
                </label>
            </div>
            <div>
                <h3 style={{ color: errors.includes('question2') ? 'red' : 'black' }}>Вопрос 2: Что такое JSX?</h3>
                <label style={{ display: 'flex', alignItems: 'center' }}>
                    Расширение JavaScript <input type="checkbox" value="answer3" onChange={(e) => handleCheckboxChange(e, 'question2')} disabled={formSubmitted} />
                </label>
                <label style={{ display: 'flex', alignItems: 'center' }}>
                    Язык программирования <input type="checkbox" value="answer4" onChange={(e) => handleCheckboxChange(e, 'question2')} disabled={formSubmitted} />
                </label>
            </div>
            <button onClick={handleSubmit} disabled={formSubmitted}>Завершить</button>
            {formSubmitted && (
              <div>
                {score > 0 && <p>Количество верных ответов: {score}</p>}
                {score === 0 && <p>Ни одного верного ответа!</p>}  
                <div className="user-scores">
                {loading ? <p>Загрузка данных...</p> : userScores !== null ? (
                    <p>Общие пользователя: {userScores}</p>
                ) : (
                    <p>Данные не найдены</p>
                    )}
                </div>
                <a href="/MainPage">На главную страницу</a>
              </div>)}</div>);};
export default Test1;