React Framer Motion Rerender Issue/Question

In my project I have an axios get request that retrieves data from MongoDB and is displayed in my React frontend. I have a framer motion animation that uses react-intersection-observer that fires and displays my results of the get request properly once scrolled into view. I have a select dropdown which changes the axios endpoint depending on which value is select. My problem is that when I select a value in the dropdown and change the endpoint, nothing displays until I scroll out of view then scroll back into the view to restart the animation. Is there a way to have the animation detect that I am still in view and fire the animation again when selecting a new value without having to scroll out then back into the view?

const Bets = () => {
    const [bets, setBets] = useState([])
    const [betType, setBetType] = useState('all')

    const controls = useAnimation()
    const reviewControls = useAnimation()

    const [ref, inView] = useInView()
    const [reviewInView] = useInView()


    useEffect(() => {
        const getBets = async () => {
            const res = await axios.get(`http://localhost:3001/api/bets/${betType}`)
            setBets(res.data)
        }

        getBets()

        if(inView){
            controls.start('show')
        }

        if(reviewInView){
            reviewControls.start('show')
        }
    }, [betType, controls, inView, reviewControls, reviewInView])

    // VARIANTS
    const CardsContainerVariants = {
        hidden: {
            opacity: 0,
        },

        show: {
            opacity: 1,
            x: 0,
            transition: { 
                duration: 1.5,
                staggerChildren: 0.8,
             
            }
        }
    }

    const CardsVariants = {
        hidden: {
            x: -100,
            opacity: 0,
         },

        show: {
            opacity: 1,
            x: 0,
             transition: { 
                duration: 1, 
            }
        }
    }

    return (
        <Container>
            <Wrapper>
                <HeroImage />
                <Hero 
                    title='Bets History' 
                    desc='All of your previous bets in one location'
                />

                <BodyContainer>
                    <BodyWrapper>
                        <BodyTitle> Your Bets </BodyTitle>

                        <BetSelect value={betType} onChange= {(e) => setBetType(e.target.value)}>
                             <BetOption value='all'> All Bets </BetOption>
                             <BetOption value='wins'> Won Bets </BetOption>
                            <BetOption value='losses'> Lost Bets </BetOption>
                        </BetSelect>

                        <CardsContainer 
                            variants={ CardsContainerVariants }
                            initial= 'hidden'
                            animate= {controls}
                            ref={ref}
                        >
                            { bets.map((bet) => (
                                <CardItems
                                    key={bet._id}
                                    variants={ CardsVariants }
                                >
                                    <BetCard 
                                        desc= {bet.desc}
                                        wager= {bet.wager}
                                        outcome= {bet.outcome}
                                        payout= {bet.payout}
                                        createdAt= {bet.createdAt}
                                    />
                                </CardItems>
                            ))}
                        </CardsContainer>
                    </BodyWrapper>
                </BodyContainer>
            </Wrapper>
        </Container>
    )
}

export default Bets