How to change display from another function in react native

I have something in react native like this:

function HomeScreen({navigation}) {
    function startGenerate(exercises) {
        console.log(exercises);
            return (
                <View style = {global.container}>
                    <Button 
                        title = "Generate recommended exercises"
                        onPress={() => navigation.navigate('List', {exercises: exercises})}
                    />
                </View>
            )
    }
   

    var exercises = [];

    if (severityValue >= 7) {
        return (
            <View style = {global.container}>
                <Text>Test</Text>
            </View>
        )
    } else if (severityValue!=null) {
        writePainProfile(areaValue, typeValue, severityValue);
        onValue(ref(db, 'count'), (snapshot) => {
            const count = snapshot.val();
            exercises = filter(count);
            return (startGenerate(exercises));
        })
        //Calling exercises here returns an empty array
    } 
//...other code omitted here for brevity

}

export default HomeScreen

With the onValue, I'm reading a firebase realtime database, and then calling the filter function, which returns a list of filtered data that fit the specified criteria. I then want to create a page that displays the filtered data and I've attempted to do this through the startGenerate function, however nothing appears to be rendering. So, is there any better way to do this?

I've also noticed that attempting to use exercises outside the onValue returns an empty array, likely due to the way the onValue works, which significantly complicates things.

Edit:
Here's how the exercises array is formatted, as an Array of objects

And here's how I am attempting to render elements of the exercises array:

return (
        <View style={global.container}>
        {exercises.map(exercise => {
            return <Text>----</Text>
        })};
        </View>
);

The reason why nothing is rendering is that updating a local variable var exercises = []; will not trigger a re-render in React. As onValue takes in a callback so it is async. We must update the state once the callback fires to trigger the re-render. Also please keep in mind that local variables are not permanent between re renders and functions called in a components body will fire on every render so you could end calling onValue more times than expected unless you use `useEffect. Instead, the way to achieve this would be to use React hooks to hold and set state. Please see example below:

import React from 'react';
import { View, Text, Button } from 'react-native';

function HomeScreen({ navigation }) {
  const [exercises, setExercises] = React.useState([]);
  // this is called on mount
  React.useEffect(() => {
    // running side effects
    writePainProfile(areaValue, typeValue, severityValue);
    onValue(ref(db, 'count'), (snapshot) => {
      const count = snapshot.val();
      // update state
      setExercises(filter(count));
    });
  }, []);

  if (severityValue >= 7) {
    return (
      <View style={global.container}>
        <Text>Test</Text>
      </View>
    );
  }
  // if no exercises yet display a placeholder
  if (!(exercises?.length > 0)) {
    return (
      <View style={global.container}>
        <Text>Loading...</Text>
      </View>
    );
  }
  return (
    <View style={global.container}>
      <Button
        title="Generate recommended exercises"
        onPress={() => navigation.navigate('List', { exercises: exercises })}
      />
      // this should work for the provided format
     {exercises.map((exercise) => {
      return <Text>{exercise.name}</Text>;
     })}
    </View>
  );
}

export default HomeScreen;