nested asChild not working !?

[thevipinmishra]

I'm trying to render this composition, but it's not working.

Tooltip is fine, button is fine, toggling doesn't work.

 <Toggle asChild>
   <Tooltip>
     <TooltipTrigger asChild>
        <Button size="icon-lg">
          <ToggleContext>
            {(context) => context.pressed ? <SpeakerHigh /> : <SpeakerX />}
          </ToggleContext>
         </Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>Toggle Volume</p>
    </TooltipContent>
   </Tooltip>
 </Toggle>

[hrsh7th]

IMO, you should do the following.

<Tooltip>
  <Toggle asChild>
    <TooltipTrigger asChild>
      <Button size="icon-lg">
        <ToggleContext>
          {(context) => context.pressed ? <SpeakerHigh /> : <SpeakerX />}
        </ToggleContext>
      </Button>
    </TooltipTrigger>
  </Toggle>
  <TooltipContent>
    <p>Toggle Volume</p>
  </TooltipContent>
</Tooltip>