React click event not bubbling

I having issue in react event bubbling. I have pair with icon inside span element and somewhere upper section element, like this example below:

const App = () => {
  const onClick = (event) => alert(event.target.nodeName);
  return (
    <section onClick={onClick}>
      <span>
        <i className="fas fa-reply"></i> Click me
      </span>
    </section>
  );
};

After click on i tag im waiting for event bubble - to call onClick atleast twice (1st for i, 2nd for span). But it never happens. Could you please tell my why?

I know possible solution - to set pointer-events on i to none, but im more curious why event not bubbling.

Thank you