Как использовать startWith с отправкой формы при фильтрации данных массива из API в React?

const data = [
  "Aransas",
  "Austin",
  "Bastrop",
  "Bee",
  "Brazoria",
  "Burleson",
  "Caldwell",
  "Calhoun",
  "Chambers",
  "Colorado",
  "Comal",
  "De Witt",
  "Fayette",
  "Fort Bend",
  "Galveston",
  "Goliad",
  "Gonzales",
  "Grimes",
  "Guadalupe",
  "Hardin",
  "Harris",
  "Jackson",
  "Jasper",
  "Jefferson",
  "Jim Wells"
];

class FetchRandomCounty extends React.Component {
  state = {
    loading: true,
    county: null
  };

  componentDidMount() {
    // const url = "http://localhost:5000/api/counties";
    // const response = await fetch(url);
    // const data = await response.json();
    this.setState({ county: data, loading: false });
  }

  render() {
    const { loading, county } = this.state;
    const selectedLetter = this.props.selectedLetter.toLowerCase();

    return (
      <div>
        {loading || !county ? (
          <div> loading... </div>
        ) : (
          <div>
            <div>
              {county
                .filter((item) => item.toLowerCase().startsWith(selectedLetter))
                .map((item) => (
                  <li key = {item}>{item}</li>
                ))}
            </div>
          </div>
        )}
      </div>
    );
  }
}

class LetterForm extends React.Component {
  state = { value: "" };

  handleChangeEvent = (event) => {
    this.setState({ value: event.target.value.slice(0, 1) });
  };

  handleSubmit = (event) => {
    event.preventDefault();
    this.props.onChange(this.state.value);
  };

  render() {
    return (
      <form onSubmit = {this.handleSubmit}>
        <label>
          StartsWith:
          <input
            type = "text"
            value = {this.state.value}
            onChange = {this.handleChangeEvent}
          />
        </label>
        <input type = "submit" value = "Submit" />
      </form>
    );
  }
}


class App extends React.Component {
  state = { selectedLetter: "J" };

  updateLetter = (selectedLetter) => {
    this.setState({ selectedLetter });
  };

  render() {
    return (
      <div>
        <FetchRandomCounty selectedLetter = {this.state.selectedLetter} />
        <LetterForm onChange = {this.updateLetter} />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>

<div id = "root"></div>