There is no magic here. It is a few booleans and a couple of small bits of state, and the UI just reads them, so a chip and its tick in the menu can never disagree. The menus also check how much room is above them and cap their height, so a long list does not run off the top.
The two parts worth showing are the send button and the voice swap. The button watches one value and fades its background. Voice is two layouts under one AnimatePresence, and swapping on wait lets the box resize while it is faded, which is why it never pops:
// One flag drives the send button, resting to armed.
const canSend = text.trim().length > 0
<motion.button
disabled={!canSend}
animate={{ backgroundColor: canSend ? "#1a1a1a" : "#e6e6e8" }}
transition={{ duration: 0.25 }}
/>
// Voice and text are two layouts behind one crossfade.
// Swapping on "wait" hides the height change, so the bar
// resizes while both are faded and never jumps.
<AnimatePresence mode="wait">
{recording
? <Recorder key="rec" />
: <Composer key="text" />}
</AnimatePresence>
That is the pattern the whole thing leans on. Read a value, animate a property off it, and let the state be the single source of truth. No part of the UI reaches over to poke another, so there is nothing to keep in sync by hand.