how to pass the handle restart function to quizresult screen without using route causing sinice is non-sereliazable warnings

Question

//here is part of code sin Quizscreen where im passing this restart quiz  function that i need to acess in quiz result scree.
 const handleRestart = () => {
    setSelectedAnswer(null);
    setCurrentQuestion(0);
    setShowExplanation(false);
    setIsAnswerSelected(false);
    setIsTimeOver(false);
    setRemainingTime(10);
    setScore(0);
    setQuestions([]); // Reset the questions array
    dispatch(newScore(0));
    const shuffledQuestions = fetchedQuestions(currentQuestions);
    setQuestions(shuffledQuestions);
  };
  
if (currentQuestion === questions.length - 1) {
      // Reached the last question

      console.log('SCORE', score);
      setSelectedAnswer(null);
      setShowExplanation(false);
      setIsAnswerSelected(false);
      setIsTimeOver(false); // Reset time over flag
      setRemainingTime(10);
      setCurrentQuestion(0);
      dispatch(newScore(score));
      setCurrentQuestion(null);
      setQuestions([]);
      setScore(0);

      navigation.navigate('Results', {handleRestart: handleRestart});
      return;
    }
    
    
    //here is quiz Result screen
    import {View, Text, TouchableOpacity} from 'react-native';
import React from 'react';
import {styles} from './styles';
import {useRoute, useNavigation} from '@react-navigation/native';
import {useDispatch, useSelector} from 'react-redux';
import {newScore, updateCurrentQuestions} from '../../redux/slice/slice';
const QuizResult = () => {
  const route = useRoute();

  const dispatch = useDispatch();
  const navigation = useNavigation();
  const total = useSelector(state => state.questions.numOfQuestions);
  const score = useSelector(state => state.score.score);
  let result;
  let totalScore;
  console.log(total);
  if (score) {
    totalScore = (score / total) * 100;
    console.log(totalScore);
  }
  if (totalScore == 0) {
    result = 'You failed.';
  } else if (totalScore == 50) {
    result = 'Great ';
  } else if (totalScore > 70 && totalScore <= 79) {
    result = 'Well done';
  } else if (totalScore > 80 && totalScore <= 100) {
    result = 'Excellent';
  } else {
    result = 'Good';
  }

  // ...
  const handleRestart = route.params?.handleRestart || (() => {}); // Provide a dummy function as a default value

  const restartQuiz = () => {
    if (handleRestart) {
      handleRestart(); // Call the handleRestart function from QuizScreen
    }
    navigation.goBack(); // Navigate back to the QuizScreen
  };
  // ...

  return (
    <View style={styles.container}>
      <View style={styles.scoreContainer}>
        <Text style={styles.scoreMessage}>{result}</Text>
        <Text style={styles.scoreText}>
          you scored : {score}/{total}
        </Text>
      </View>
      <View style={styles.restartButtonContainer}>
        <TouchableOpacity
          style={styles.restartButton}
          onPress={() => restartQuiz()}>
          <Text style={[score.restartButtonText, {color: 'white'}]}>
            Restart Quiz
          </Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

export default QuizResult;

i want to access the handle restart function in quiz result screen after user answers last question and be directed to quiz result screen? i used the routes to pass it to quiz result screen,but i am getting this error: WARN Non-serializable values were found in the navigation state. Check:

Home > Results > params.handleRestart (Function)

This can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. is the a way to acess the function in quiz result screen or other ways to that in quiz result when is beig clicked will set the sate values in quizscreen?

i tried to pass the handle restart quiz to quiz result scren using react navigation routes