Невозможно установить фокус на содержимом компонента Tooltip из пользовательского интерфейса материала при запуске события onClick, но возможно при запуске события onKeyPress

Я использую компонент Tooltip из MUI в своем настроенном TooltipComponent. TooltipComponent работает аналогично Dialog: пользователь может видеть всплывающее содержимое после щелчка (не наведения курсора мыши) на элемент (в моем случае div с текстом «CLICK»). Это всплывающее окно с содержимым состоит из текста и значка «x». Щелкнув значок «x», можно закрыть всплывающую подсказку. Я добавил два события: onClick и onKeyPress, они оба делают одно и то же — открывают всплывающее содержимое. В целях обеспечения доступности, когда всплывающее содержимое открыто, мне необходимо установить фокус на значок «x». Я делаю это в React, используя ссылку. Мне удалось сделать это с помощью события onKeyPress, и я ожидал, что тот же код отлично работает для события onClick, но это не работает. Я не только не могу поставить фокус после срабатывания onClick, но и почему-то всплывающее окно открывается и закрывается сразу без моего вмешательства (по логике кода всплывающее окно можно закрыть только после нажатия «x» )

Почему один и тот же код идеально работает для onKeyPress и не работает для onClick? И как решить эту проблему для onClick?
Я ценю любую помощь.

Вот код моего пользовательского компонента TooltipComponent:

import React, { useEffect, useRef, useState } from 'react';
import {Tooltip, ClickAwayListener} from '@mui/material';

function TooltipComponent() {  
 const [open, setOpen] = useState(false);   
 const toggleTooltip = () => setOpen(!open); 
 const closeTooltip = () => setOpen(false);  
 const myDivRef = useRef(null);

  useEffect(() => {
    if (myDivRef.current) {
      if (open){
        myDivRef.current.focus();
      }
    }}, [open]);

  const BodyWrapper = (
    <ClickAwayListener onClickAway = {closeTooltip}>
      <div style = {{ position: 'relative' }}>
        <div
          tabIndex = {0}
          ref = {myDivRef}
          onClick = {closeTooltip}
          onKeyPress = {closeTooltip}
          aria-description = "close icon"
          style = {{
            position: 'absolute',
            left: '-3px',
            top: '-3px',
            fontSize: '36px',
            fontWeight: 'light',
            cursor: 'pointer',
          }}
        >
          x
        </div>
        <div aria-description = "tooltip content">
          <div style = {{ padding: '24px', color: 'black' }}>
            Top - Start -{' '}
            <div>
              <a href = "#">I am a link</a>
            </div>
          </div>
        </div>
      </div>
    </ClickAwayListener>   );

  return (
    <Tooltip
      title = {BodyWrapper}
      arrow
      disableHoverListener = {true}
      tabIndex = {0}
      open = {open}
      placement = "bottom"
      onClose = {closeTooltip}
      PopperProps = {{
        disablePortal: true,
        role: 'dialog',
        'aria-live': 'polite',
      }}
    >
      <div
        onClick = {toggleTooltip}
        onKeyPress = {toggleTooltip}
        style = {{
          display: 'inline-block',
          textAlign: 'center',
          cursor: 'pointer',
        }}
      >
        <div style = {{ margin: '6px', color: 'black' }}>
          CLICK
        </div>
      </div>
    </Tooltip>   ); }

export default TooltipComponent;