react 函数式组件，阻止点击冒泡事件

• 如果给同时给粉色和红色两个盒子绑定点击事件，由于事件冒泡原理，那么点击红色盒子则会直接点到外层粉色盒子所绑定的事件。如何解决事件冒泡？
  

import React from 'react'
import './bubbing.css'

export default function Bubbling() {

  const toA = () => {
    console.log('A');
  }
  const toB = (e) => {
    //阻止冒泡
    e.stopPropagation(); //阻止原生事件冒泡
    e.nativeEvent.stopImmediatePropagation(); //阻止最外层document上的事件冒泡
    console.log('B');
  }

  return (
    <div className='A' onClick={toA}>
      <div className='B' onClick={(e) => toB(e)}></div>
    </div>
  )
}

css样式

.A {
  width: 100px;
  height: 100px;
  background-color: pink;
  display: flex;
  justify-content: center;
  align-items: center;
}

.B {
  width: 20px;
  height: 20px;
  background-color: red;
}