Conditional rendering? Any tips on how to improve my code would be great

Hi I am pretty new to the wonderful world of React. I am hoping I can get some help here I have two inputs passing data through from an api they render a list of options and I want to send the selected inputs from those options back to the parent in the input fields to display for another search. i tried passing state down to them and render them them optionally with both a ternary and an if else statement in the "SearchCityList" component in several ways but I either get both lists rendered and they would have to choose between one list that is doubled to put in each input field or it only puts the selected value in one input. Would appreciate any & all suggestions Thanks!

class Form extends Component {
  state = {
    showComponent: false,
    showComponent2: false,
  };


  // open/close control over SearchCity component box

  openSearch = () => {
    this.setState({ showComponent: true });
  };
  openSearch2 = () => {
    this.setState({ showComponent2: true });
  };
  closeSearch = () => {
    this.setState({ 
      showComponent: false,
      showComponent2: false
    });
  };

  // Passed down cb function to get selected city search in selectCity component

  GoingTo = (flights) => {
    this.setState({ GoingTo: [flights] });
  };
  LeavingFrom = (flights) => {
    this.setState({ LeavingFrom: [flights] });
  };

  render() {
    return (
      <div>
        <form className="form-fields container">
          <div className="inputs">
            <h1>Search for a flight!</h1>
            <div className="depart">
              <input
                onClick={this.openSearch}
                className="flight-search"
                placeholder="Leaving From"
                value={this.state.LeavingFrom}
              ></input>
              <input type="date"></input>
            </div>
            <div className="Returning">
              <input
                onClick={this.openSearch2}
                className="flight-search"
                placeholder="Going To "
                value={this.state.GoingTo}
              ></input>
              <input type="date" placeholder="Returning"></input>
            </div>
          </div>
          <button>Check Flights!</button>
        </form>

        {this.state.showComponent || this.state.showComponent2 ? (
          <SearchCity
          openSearch={this.openSearch}
          openSearch2={this.openSearch2}
            flightSearch={this.state.flightSearch}
            closeSearch={this.closeSearch}
            GoingTo={this.GoingTo}
            LeavingFrom={this.LeavingFrom}
            onSearchSubmission={this.onSearchSubmission}
            closeSearch={this.closeSearch}
          />
        ) : null}
      </div>
    );
  }
}

export default Form;


class SearchCity extends Component {
  state = {
    LeavingFrom: "",
    GoingTo: "",
    search: "",
    flightSearch: [],
  };

  // Search submission / api call
  onSearchSubmission = async (search) => {
    const response = await Axios.get(

      {
        headers: {
          "
          useQueryString: true,
        },
      }
    );
    // set New state with array of searched flight data sent to searchCity component

    const flightSearch = this.setState({ flightSearch: response.data.Places });
  };

  // Callback function to send search/input to parent "Form" component

  submitSearch = (e) => {
    e.preventDefault();
    this.onSearchSubmission(this.state.search);
  };

  //  closeSearch callback function sent from Form component to close pop up search box when X is pressed
  closeSearch = () => {
    this.props.closeSearch();
  };

  render() {
    return (
      <div className="container search-list">
        <form onChange={this.submitSearch}>
          <i className="fas fa-times close-btn" onClick={this.closeSearch}></i>
          <input
            onChange={(e) => this.setState({ search: e.target.value })} //query-search api
            value={this.state.search}
            className="search-input"
            type="text"
            placeholder="Search Locations"
          ></input>
          <div className="search-scroll">
            <SearchCityList
              openSearch={this.props.openSearch}
              openSearch2={this.props.openSearch2}
              LeavingFrom={this.props.LeavingFrom}
              GoingTo={this.props.GoingTo}
              flightSearch={this.state.flightSearch}
            />
          </div>
        </form>
      </div>
    );
  }
}

export default SearchCity;






function SearchCityList({ flightSearch, LeavingFrom, GoingTo }) {
  const renderList = flightSearch.map((flights) => {
    return (
      <div>
        <SelectCityLeaving LeavingFrom={LeavingFrom} flights={flights} />
        <SelectCityGoing GoingTo={GoingTo} flights={flights} />
      </div>
    );
  });

  return <div>{renderList}</div>;
}

export default SearchCityList;