How to make sure that the value of a setstate variable is undefined when passing it as a parameter?

See more:

navigation

ReactJS

react-native

Using react native, I wanted to pass cookBooks to another screen. I can confirm that cookBooks was updated inside useEffect. But when I pass it as a parameter to another screen, no data was passed.

interface IBook {
     userId?: string;
     referenceId: string;
     bookTitle: string;
     genre: string;
    }

    const userBooks = useGetBooksOnSnapshot(userId);
    const [cookBooks, setCookBooks] = useState<IBook>();

    useEffect(() => {
      if (!userBooks ) {
        return;
      }
      setCookBooks(
        userBooks.find((value: IBook ) => value.genre === 'Cookbook'),
      );
    }, [userBooks]);

    return (
      <Box>          
         <Button
           startIcon={<MaterialIcon name="edit" size={33} color="white" />}
           colorScheme="blue"
           style={styles.button}
           onPress={() =>
             navigation.navigate({
               name: 'EditBooks',
               params: { books: cookBooks },
             })
           }
         />
      </Box>
    );

Is there a way to make sure that the parameter passed is not empty or undefined?

What I have tried:

I tried adding console logs in order to track the values of cookBooks and the value was really set. I just can't figure out why when I pass it to another screen, the value is empty/undefined