undefined is not an object (evaluating 'sound.stopAsync') New to development if anyone could help me out that would be awesome!

i keep getting this error about sound.stopAsync is not an object but I can use it to stop playback so I don't know what the issue is or how to fix it.

import { Text, View, StyleSheet, Pressable, Alert} from 'react-native';
import Colors from '../constants/Colors';
import {Ionicons } from '@expo/vector-icons';
import { Audio } from 'expo-av';

import React, { useState, useEffect } from 'react';

const Timer = (props) => {
const [seconds, setSeconds] = useState(props.time);
const [isActive, setIsActive] = useState(false);
const [sound, setSound] = useState();

async function playSound() {
const { sound } = await Audio.Sound.createAsync(
require('../assets/mysterious_bass.wav'),

);

setSound(sound);
await sound.playAsync();

}

useEffect(() => {
return sound
? () => {
sound.unloadAsync();
}
: undefined;

}, [sound]);

useEffect(()=>{
if(seconds === 0){
playSound();

}
},[seconds])

const toggle= async()=> {
setIsActive(!isActive);
try {
await sound.stopAsync();
} catch (error) {
console.error(error);
}


}

const reset = async () => {
setSeconds(props.time);
setIsActive(false);
try {
await sound.stopAsync();
} catch (error) {
console.error(error);
}
}

useEffect(() => {
let interval = null;

if (isActive) {
interval = setInterval(() => {
setSeconds(seconds => seconds - 1);

}, 1000);
} else if (!isActive && seconds !== 0) {
clearInterval(interval);
}
return () => clearInterval(interval);
}, [isActive, seconds]);

return (




{isActive ? : }




00:{seconds}


Reset




);
};

package.json

{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.3.0",
"@fortawesome/free-regular-svg-icons": "^6.0.0-beta3",
"@fortawesome/free-solid-svg-icons": "^6.0.0",
"@fortawesome/react-fontawesome": "^0.1.17",
"@fortawesome/react-native-fontawesome": "^0.2.7",
"@react-native-community/masked-view": "^0.1.11",
"@react-navigation/bottom-tabs": "^6.2.0",
"axios": "^0.26.0",
"expo": "~44.0.0",
"expo-app-loading": "~1.3.0",
"expo-av": "~10.2.0",
"expo-linear-gradient": "~11.0.3",
"expo-status-bar": "~1.2.0",
"firebase": "^9.6.7",
"firebase-functions": "^3.18.1",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-icons": "^4.3.1",
"react-native": "0.64.3",
"react-native-elements": "^3.4.2",
"react-native-gesture-handler": "~2.1.0",
"react-native-linear-gradient": "^2.5.6",
"react-native-reanimated": "~2.3.1",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "~3.10.1",
"react-native-svg": "^12.1.1",
"react-native-web": "0.17.1",
"react-navigation": "^4.4.4",
"react-navigation-header-buttons": "^6.3.1",
"react-navigation-material-bottom-tabs": "^2.3.5",
"react-navigation-stack": "^2.10.4",
"react-redux": "^7.2.6",
"redux": "^4.1.2",
"redux-thunk": "^2.4.1"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"typescript": "^4.5.5"
},
"private": true
}