Как настроить URL для получения в React?

Question

Я наконец понял, как получить данные из API :), но теперь я застрял, потому что пытаюсь изменить URL-адрес запроса на выборку.

Я не могу понять, как использовать свой ввод в URL-адресе, так как он вызывает ошибку, говоря, что ввод не определен. Я предполагаю, что технически это не связано. Я не замечаю чего-то действительно простого?

Также немного фона; Я пытаюсь создать простое словарное веб-приложение, в котором вы вводите слово, а оно извлекает определения. В настоящее время я использую API WordAPI для своего проекта.

import React from "react";
import "./App.css";
import ZipForm from "./ZipForm.js";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: null,
      isLoaded: false,
      input: "",
    };

    this.onFormSubmit = this.onFormSubmit.bind(this);
  }

  onFormSubmit(input) {
    this.setState({ input });

  }

  componentDidMount() {
    const url = `https://wordsapiv1.p.rapidapi.com/words/${input}/definitions`
    fetch(url, {
      method: "GET",
      headers: {
        "x-rapidapi-host": "wordsapiv1.p.rapidapi.com",
        "x-rapidapi-key": "58143f60a0msh9b238a4cf58ba29p1e28e0jsn9e523b0104ba",
      },
    })
      .then((response) => response.json())
      .then((json) => {
        this.setState({
          items: json,
          isLoaded: true,
        });
        console.log(json.definitions[0].definition);
      });
  }

  render() {
    var { isLoaded, items } = this.state;

    if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
    }
    return (
      <div>
        <h1 className="tc">{items.definitions[0].definition}</h1>
        <ZipForm onSubmit={this.onFormSubmit} />
      </div>
    );
  }
}