onBlur for div element in React

I want to perform a function after a div element has left focus.

I’m using tabIndex and onBlur function inside the div. And its working fine when i manually put focus by clicking on any of the elements inside the div. But by default when no item is clicked inside the div, its not working.

My component is a Functional Component & the div is rendered dynamically so also I’m unable to set focus using useRef.

const renderHeaderCell = (header, headerKey) => {
    return (
      <div className="DataTable__header-cell-wrapper">
        {filterable ? (
          <IconButton onClick={() => toggleFilterPanel(headerKey)}>
            <i className="material-icons">filter_list</i>
          </IconButton>
        ) : null}
        {activeFilterHeader === headerKey ? (
          <div
            tabIndex={0}
            onFocus={e => {
              console.log("DIV", "focus");
            }}
            onBlur={e => {
              console.log("DIV", "blur");
            }}
            style={{ border: "1px solid blue" }}
          >
            DIV container
            <input
              type="text"
              onFocus={e => {
                console.log("input", "focus");
              }}
              onBlur={e => {
                e.stopPropagation();
                console.log("input", "blur");
              }}
              placeholder="Inside Textbox"
            />
            Click outside
          </div>
        ) : null}
        {sortedByColumn === headerKey ? renderSortIcon() : null}
      </div>
    );
  };

Code after i click the icon to show the DIV

  const toggleFilterPanel = headerKey => {
    if (activeFilterHeader === headerKey) {
      setActiveFilterHeader("");
    } else {
      setActiveFilterHeader(headerKey);
      setUniqueItemsForFilter(getUniqueItemsForFilter(rows, headerKey));
    }
  };

Code after onBlur is called

const onBlur = () => {
    console.log("Blured");
  };

So how shall i make onBlur to work on a div element?

Following image shows current focus

class BlurExample extends React.Component {
  render() {
    const {title} = this.props;
    return (
      <div
        tabIndex={ 0 }
        onFocus={ () => {console.log('main', 'focus');} }
        onBlur={ () => {console.log('main', 'blur');} }
        style={ { border: '1px solid coral', padding: '10px', fontFamily: 'sans-serif' } }
      >
        Click here 1
        <input
          type="text"
          onFocus={ () => {console.log('input', 'focus');} }
          onBlur={ () => {console.log('input', 'blur');} }
          placeholder="Click here 2"
          style={ { margin: '0 10px', padding: '10px' } }
        />
        Click here 3
      </div>
    );
  }
}
  
ReactDOM.render(
  <BlurExample />,
  document.body
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>