如何确保可拖动组件不会超出react-beautiful dnd中的Dropable区域或某个特定的div？

import React from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

class App extends React.Component {
  state = {
    items: [
      { id: '1', content: 'Item 1' },
      { id: '2', content: 'Item 2' },
      { id: '3', content: 'Item 3' },
    ],
  };

  onDragEnd = (result) => {
    // 拖动结束事件处理
    const { destination, source } = result;

    // 如果没有有效的目标位置，或者位置没有变化，则不进行处理
    if (!destination || (destination.droppableId === source.droppableId && destination.index === source.index)) {
      return;
    }

    // 更新items的顺序
    const items = Array.from(this.state.items);
    const [removed] = items.splice(source.index, 1);
    items.splice(destination.index, 0, removed);

    // 更新state
    this.setState({ items });
  };

  render() {
    return (
      <DragDropContext onDragEnd={this.onDragEnd}>
        <Droppable droppableId="droppable">
          {(provided) => (
            <div ref={provided.innerRef} style={{ border: '1px solid black', padding: '10px' }}>
              {this.state.items.map((item, index) => (
                <Draggable key={item.id} draggableId={item.id} index={index}>
                  {(provided) => (
                    <div
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                      style={{
                        userSelect: 'none',
                        padding: '16px',
                        margin: '0 0 8px 0',
                        backgroundColor: 'white',
                        ...provided.draggableProps.style,
                      }}
                    >
                      {item.content}
                    </div>
                  )}
                </Draggable>
              ))}
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      </DragDropContext>
    );
  }
}

export default App;