Drag and drop - The fixed element showing up on the drag image

Question

I am trying to learn drag and drop features using the HTML native APIs and without any plugin. I tried the following code

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

function App() {
  const items = Array(100).fill(null);
  const onDragStart = ev => {
    const element = ev.target;
    console.log(element);
    ev.dataTransfer.setDragImage(element, 50, 50);
    ev.dataTransfer.dropEffect = "move";
  };
  return (
    <div className="App">
      <Grid>
        {items.map((item, index) => (
          <GridItem key={index} draggable="true" onDragStart={onDragStart} />
        ))}
      </Grid>
      <FixedItem draggable="false" />
    </div>
  );
}

const Grid = styled.section`
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
`;

const GridItem = styled.section`
  display: inline-block;
  height: 200px;
  width: calc(50% - 20px);
  background: grey;
  margin: 10px 0;

  &:nth-child(2n) {
    margin-left: 10px;
  }

  &:nth-child(2n + 1) {
    margin-right: 10px;
  }
`;

const FixedItem = styled.aside`
  position: fixed;
  width: 100px;
  height: 50px;
  background: red;
  top: 20px;
  left: 30px;
`;

<script src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/5.1.1/styled-components.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Use the above button to access the code. The above code would lead to a layout as below:

The element in red colour is a fixed element. The issue is when I start dragging the first element, the drag image also includes the fixed red element as displayed in below image:

wanted to know if there is a possible way to avoid displaying the red fixed box on the drag image.