Вынесите элемент div на передний план с помощью zindex в React

Мне труднее всего заставить это работать. Я перешел от обработчика асинхронных событий к текущей функции. В настоящее время происходит то, что происходит, если вы выбираете элемент, который является последним в родительском div, он в конечном итоге имеет тот же zIndex, а другой элемент все еще размещается сверху.

Я в основном пытаюсь убедиться, что мой оператор if гарантирует, что элемент, который я нажимаю, имеет самый высокий zIndex. Это весь код моего компонента, основная функция, на которую нужно обратить внимание, - это onStart. Я оставляю все в беспорядке в надежде, что кто-то сможет понять, чего я пытаюсь достичь, и помочь мне:

import React, {Component} from 'react'
import Draggable from 'react-draggable'
import Router from 'next/router'


import {
  BrowserFrame, 
  DragHandle,
  BrowserContent 
} from './styles'

class DesktopBrowser extends Component {

  constructor(props) {
    super(props)
    this.state = {
      highestIndex: 0
    }
  }

  findHighestZIndex(elem) {

    let elems = document.getElementsByClassName(elem);


    let highest = 0;

    for (let i = 0; i < elems.length; i++) {
      let zindex =document.defaultView.getComputedStyle(elems[i],null)
      .getPropertyValue("z-index");

      if ((zindex > highest) && (zindex != 'auto')) {

        this.setState({
          highestIndex: zindex
        })

      }

    }




  }

  onStart(e) {

    this.findHighestZIndex("react-draggable")


    if (this.state.highestIndex >= 0) {
      console.info('greater than zero', this.state.highestIndex, e.currentTarget.style.zIndex)
      e.currentTarget.style.zIndex = (+this.state.highestIndex) + (+1)
      this.setState({
        highestIndex: (+e.currentTarget.style.zIndex) + 1
      })
    } else if (this.state.highestIndex < e.currentTarget.style.zIndex) {
      console.info('lower')
      e.currentTarget.style.zIndex = (+this.state.highestIndex) + (+2)
    } else {
      console.info('catch')
    }

    // if (this.state.highestIndex >= 0) {

    //   this.setState({
    //     highestIndex: (+this.state.highestIndex) + 1
    //   })

    //   e.currentTarget.style.zIndex = (+this.state.highestIndex) + 1
    //   console.info(e.currentTarget.style.zIndex)

    // } 


  }




  render() {
   return (
      <Draggable 
        bounds = "body"
        handle = ".drag-handle"
        onStart = {this.onStart.bind(this)}
        defaultPosition = {
          {
            x: Math.floor(Math.random() * Math.floor(document.getElementsByClassName('content')[0].offsetWidth - 1000)), 
            y: Math.floor(Math.random() * Math.floor(document.getElementsByClassName('content')[0].offsetHeight - 500)) 
          }
        }>
      <BrowserFrame>
        <DragHandle className = "drag-handle" />
        <BrowserContent bg = {this.props.content.image}>
          <button onClick = {(e) => {
            e.preventDefault()
            Router.push(`/portfolio/${this.props.content.slug}`)
          }}>View</button>
        </BrowserContent>

      </BrowserFrame>
      </Draggable>
    )
  }
}

export default DesktopBrowser