onClick event is not working on safari iOS

I am developing a web app using React js. Every corner of the app works just fine when running on chrome for both desktop and android devices. The problem is that safari does not trigger onClick={} and I don't know why. Here are some considerations:

1. when the page load for the first time, trying to click on the element so early (less than 1 sec) would fire onClick. and after that, it won't work.
2. I've searched and tried styling the element: cursor: 'pointer'.
3. I've tried using React-Tappable.
4. I've tried removing all :hover stylings as well.

Unfortunately, none of the aforementioned worked. Here is the chunk of code that I've written:

<div
  onClick={this._open_profile_image}
  style={{
    position: "absolute",
    display: "flex",
    justifyContent: "center",
    width: "100%"
  }}
>
  <img
    onClick={this._open_profile_image}
    src={this.state.file}
    alt="Avatar"
    style={{
      width: "35vw",
      height: "35vw",
      marginTop: "15VH",
      borderRadius: "50%",
      boxShadow:
        "rgba(0, 0, 0, 0.05) 5px 5px 20px 7px, rgba(0, 0, 0, 0.13) -5px -5px 30px 1px",
      border: "5px solid rgb(45, 148, 255)"
    }}
  />
  <div>
    {this.state.isOpen && (
      <Lightbox
        reactModalStyle={customStyles}
        mainSrc={this.state.file}
        onCloseRequest={() => this.setState({ isOpen: false })}
      />
    )}
  </div>
</div>;

I've used onClick on every div and its children but none of those fire. Any idea on how to fix this safari's bug?