Вам нужно добавить прослушиватель событий в метод componentDidMount, только если ссылка на условно визуализируемый элемент существует. Вы можете узнать, была ли ссылка прикреплена к элементу, используя this.refName.current.

Самое главное здесь то, что элемент input получает свои собственные методы жизненного цикла вместо того, чтобы делиться ими с более крупным компонентом. Переместив элемент input в его собственный компонент с его собственными методами жизненного цикла, эти методы будут срабатывать только при создании и удалении input.

// App.jsx
import React from "react"
import ReactDOM from "react-dom"

import CustomInput from "./CustomInput"

class App extends React.Component {
  constructor(props) {
    super(props)
    this.inputRef = React.createRef()
    this.toggleInput = this.toggleInput.bind(this)
    this.state = {
      inputVisible: false
    }
  }

  toggleInput(e) {
    this.setState(prevState => ({
      inputVisible: !prevState.inputVisible
    }))
  }

  render() {
    const { inputVisible } = this.state

    return (
      <div>
        <input type = "button" value = "toggle input" onClick = {this.toggleInput} />
        { inputVisible
          ? <CustomInput />
          : <p>Input is not visible</p>
        }
      </div>
    )
  }
}

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

// CustomInput.jsx
import React from "react"

export default class CustomInput extends React.Component {
  constructor(props) {
    super(props)
    this.inputRef = React.createRef()
  }

  componentDidMount() {
    this.inputRef.current &&
      document.addEventListener("mousedown", this.handleClick)
  }

  componentWillUnmount() {
    document.removeEventListener("mousedown", this.handleClick)
  }

  handleClick(e) {
    console.info("clicked")
  }

  render() {
    return (
      <input type = "text" ref = {this.inputRef} />
    )
  }
}

Попробуйте здесь