I am trying to make a tic-tac-toe app in react native and instead of normal crosses and o's, I wanted to use images of cats. I figured out how to add cats in but every time I add or remove one, every other image reloads and it looks very clunky. Is there any workaround for this?

Here is the code

function GameScreen() {
    
    const initialBoxVals = [0, 1, 2, 3, 4, 5, 6, 7, 8].map((idNum) => { return {
        id: idNum,
        checked: false, // eventually willl change to int of value 0 (initial state), 1 (checked by p1), 2 (checked by p3)
    }})

    const boxStates = [0, 1, 2, 3, 4, 5, 6, 7, 8].map((i) => {
        return useState(initialBoxVals[i])
    })

  return (
    <View style={styles.container}>
        <View style={styles.board}>
            <View style={styles.row}>
                <Box id={0} />
                <Box id={1} />
                <Box id={2} />
            </View>
            <View style={styles.row}>
                <Box id={3} />
                <Box id={4} />
                <Box id={5} />
            </View>
            <View style={styles.row} >
                <Box id={6} />
                <Box id={7} />
                <Box id={8} />
            </View>
        </View>
    </View>
  )
    
    function Box(props) {
        let [box, setBox] = boxStates[props.id]
        if (box.checked === true) {
            return (
                <View style={styles.box} onTouchStart={() => setBox({...box, checked: !box.checked})}>
                    <Image style={styles.image} source={require("../assets/grumpycat.png")} />
                </View>)
        } else {
            return (
                <View style={styles.box} onTouchStart={() => setBox({...box, checked: !box.checked})}>
                </View>)
        }
    }
}

export default GameScreen;```