How to start animation for div p after every div animation

const [ref, animate] = useAnimate()

<div ref={ref}>
    <div className="opacity-0 bg-yellow-500">
        <h1>text</h1>
        <p className="opacity-0">animated before div</p>
    </div>
    <div className="opacity-0 bg-yellow-500">
        <h1>text</h1>
        <p className="opacity-0">animated before div</p>
    </div>
        <div className="opacity-0 bg-yellow-500">
        <h1>text</h1>
    <p className="opacity-0">animated before div</p>
    </div>
</div>

animate([
    ["div", { opacity: 1 }, {
        delay: stagger(0.6, {
        startDelay: 0.5
        })
    }],
    ["div p", { opacity: 1 }, { delay: stagger(0.8), at: "<" }]
])

it doesn’t work and it seems to me that constantly selecting the value is not the best option