我不理解为什么这个onclick关心孩子是什么以及它是如何工作的

<ListItemButton onClick={() => onClickResult(q)}>
       <Typography variant="body1">{highlighted}</Typography>
  </ListItemButton>

在这个例子中，使用了来自mui的版式，它作为aspect工作（第一次单击触发onClick）
但使用几乎相同的代码，但另一个孩子：

<ListItemButton
            onClick={() => onClickResult(q)}
          >
            <HighlightText text={highlighted} />
          </ListItemButton>

其中Highlighted在return（）之前定义：

const HighlightText = ({ text }: { text: string }) => {
    const splitText = text.split('}');
    const hasHighlights = splitText.length > 1;
    if (!hasHighlights) {
      return <Typography variant="body1">{text}</Typography>;
    }
    return (
      <StyledHighlightText>
        <Typography variant="body1">{splitText[0].replace('{', '')}</Typography>
        <StyledHighlightTextBold variant="body1">
          {splitText[1]}
        </StyledHighlightTextBold>
      </StyledHighlightText>
    );
  };

和单击：

const onClickResult = (query: string) => {
    window.location.href = `${url}?q=${encodeURIComponent(
      query,
    )}&origin=PHRASE_SUGGEST`;
  };

现在我必须点击两次才能触发onClick。我看绝对没有理由让它需要2次点击而不是1次来触发点击