Dialog radix-ui не реагирует на нажатие кнопки закрытия в хедере, пока на нем висит position fixed, почему?

Question

Евгения @AlexandraWeather

джун Web разработчик

Dialog radix-ui не реагирует на нажатие кнопки закрытия в хедере, пока на нем висит position fixed, почему?

для реализации выпадающего бургер-меню решила взять диалог из radix ui. Сделала, чтобы открытие и закрытие этого окна происходило по нажатию на бургер. Хедер, где бургер находится, спозиционирован фиксированно. Когда нажимаешь на бургер в первый раз, окно бургера открывается. Но когда нажимаешь его еще раз, окно не закрывается. Случайно выяснила, что если убрать у хедера позиционирование, то и открытие и закрытие работает нормально. Первый раз с таким работаю, подскажите, пожалуйста, что может быть не так?

//сам дилог
import * as Dialog from '@radix-ui/react-dialog'

import Burger from '../burger'
import BurgerClose from '../burger-close'
import BurgerMenuContent from './burger-menu-content'

type BurgerMenuProps = {
  gridPosition: string
}

const BurgerMenu = ({ gridPosition }: BurgerMenuProps) => {
  return (
    <Dialog.Root>
      <Dialog.Trigger asChild>
        <Burger gridPosition={gridPosition} />
      </Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay />
        <Dialog.Content>
          <BurgerMenuContent />
          <Dialog.Title />
          <Dialog.Description />
          <Dialog.Close asChild>
            <BurgerClose gridPosition={gridPosition} />
          </Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  )
}
export default BurgerMenu
// хедер
import BurgerMenu from './burger-menu/burger-menu-dialog'
import HeaderLogo from './logo'
import HeaderNavigation from './navigation'

type ProductsHeaderProps = {
  gridPosition: string
}

const ProductsHeader = ({ gridPosition }: ProductsHeaderProps) => {
  return (
    <header
      className={`${gridPosition} flex items-center bg-clip-content pt-[3.4rem] lg:pt-[4rem] xl:pt-[5rem] 2xl:pt-[6.25rem]`}
    >
      <div className='flex w-full items-center px-[2rem] py-1 lg:px-[4rem] xl:px-[5rem] 2xl:px-[6.25rem]'>
        <HeaderLogo gridPosition='2xl:mr-[11rem] xl:mr-[9rem] lg:mr-[7rem]' />
        <HeaderNavigation gridPosition='hidden lg:inline-block' />
        <BurgerMenu gridPosition='ml-auto' />
      </div>
    </header>
  )
}

export default ProductsHeader
// хедер в компоненте
      <ProductsHeader gridPosition='fixed top-0 left-0 right-0 z-10' />