问如何避免子div调用父母的“`onDragLeave`”事件

EN

import React, { useState } from 'react';

const App = () => {
  const [dragOver, setDragOver] = useState(false);

  const preventDefaults = (event) => {
    event.preventDefault();
    event.stopPropagation();
  };

  const onDragEnter = (event) => {
    preventDefaults(event);
    console.log('ENTER');
    if (!dragOver) {
      setDragOver(true);
    }
  };

  const onDragLeave = (event) => {
    preventDefaults(event);
    console.log('LEAVE');
    setDragOver(false);
  };

  return (
    <div
      data-testid="document-upload"
      onDragEnter={onDragEnter}
      onDragLeave={onDragLeave}
      style={{ 
        background: dragOver ? 'green' : 'red',
        height: '20rem',
        width: '20rem',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <div
        style={{ border: '2px solid blue', height: '10rem', width: '10rem' }}
      />
    </div>
  );
};

export default App;