ReactJS - Conditional Rendering with Ternary operator - InvalidValueError

Question

I am building a web app with ReactJS, on the home page I am using a ternary operator two render two different Fragment according to the state( if true or false).

my Code looks like:

import React, { Component, Fragment } from 'react'
import { Link } from 'react-router-dom'

class Home extends Component {
  state = {
    citySearch : false
  }

    render(){

      return (
        <div className="home-main">

        { !this.state.citySearch ? (
          <Fragment>
            <h2 className="home-heading">Search Cafés from your</h2>
            <div className="home-buttons">
              <button className="home-buttons">Near You</button>
              <span>or</span>
              <button onClick={this.ActivateCitySearch} className="home-buttons">City</button>
            </div>
          </Fragment>
        )
          : (
            <Fragment>
              <h2 className="home-heading">Search Cafés from your</h2>
              <input className="search-café" placeholder="Enter your location"/>
              <Link className="search-input"><i className="fas fa-search"></i></Link>
            </Fragment>
          )
        }

        </div>
        )
    }
}

export default Home

The code works but I get the following in the console

InvalidValueError: not an instance of HTMLInputElement

Does anyone know how to get rid of this error??

Thanks,

J