reference child component as ref?

<button ref={setReference} onClick={() => setOpen(!open())}>
    {p.trigger /* JSX.Element */}
</button>

<button ref={setReference} onClick={() => setOpen(!open())}>
    {p.trigger /* JSX.Element */}
</button>

<button ref={setReference} onClick={() => setOpen(!open())}>
    {p.trigger /* JSX.Element */}
</button>

<button ref={setReference} onClick={() => setOpen(!open())}>
    {p.trigger /* JSX.Element */}
</button>

Is there some way I can have this not wrap the child in a button, but instead let the child be its own button and reference that?