How to get state property (selectedCity) as blank in the render function when dropdown gets reset. I don't like to write this.setState({selectedCIty:"")}

export default class ReactState extends React.Component<
  IReactStateProps,
  IReactStateState
> {
  constructor(props) {
    super(props);
    this.state = {
      City: "",
      selectedCity: "",
      cityValues: [
        {
          key: "Pune",
          text: "Pune",
        },
        { key: "Kashmir", text: "Kashmir" },
        { key: "London", text: "London" },
      ],
    };
  }
  public selectCity = (event: any, option?: any, index?: any) => {
    this.setState({ selectedCity: option.text });
  };
  public render(): React.ReactElement<IReactStateProps> {
    return (
      <div className={styles.reactState}>
        <Dropdown
          options={this.state.cityValues}
          selectedKey={this.state.selectedCity}
          onChange={this.selectCity}
        ></Dropdown>
        <PrimaryButton
          text="Click Here"
          onClick={this.resetCityDD}
        ></PrimaryButton>
        {this.state.selectedCity}{" "}
        {/*How to set it to blank when dropdown get reset*/}
      </div>
    );
  }
  public resetCityDD = () => {
    this.setState({ cityValues: [] });
  };
}