Brake Made

загружаете сюда gif https://www167.lunapic.com/editor/?action=quick-upload
потом Animation > Edit Gif Animation > More Animation Effects > Animation Frame Timing > #Loops: 0
File > Save Image > Save as GIF

В state пишут состояние. Если компонент пребывает в разных состояниях их необходимо фиксировать. Данные полученные от пользователя или с сервера это тоже состояние. Другой вопрос, каким состоянием воспользоваться непосредственно компонента, родителя или вообще вынести в хранилище redux? Чтобы хорошо понимать этот вопрос необходим опыт и знания полученные путем анализа и сравнения разных решений в контексте разных задач. Изучайте хороший код, читайте статьи, пишите.
Если есть более конкретные вопросы на примерах - задавайте.

Как я понял, у вас контролируемый input. Вам надо разделить в коде searchValue и значение input(назовем его searchInputValue). То есть, по нажатию кнопки Поиск пишите значение searchInputValue в state как searchValue, его и передавайте в компонент с ошибкой. В итоге в input будет использоваться searchInputValue, в ошибке и поисковом запросе searchValue.

Вычисляемые имена свойств.

Этот метод стоит на событие onChange.

Сомнительное утверждение. "На событие" "стоит" не handleChange, а функция, которую он возвращает. По-видимому, необходимо единообразно обрабатывать события, возникающие в разных местах - единственные отличия, это имена обновляемых свойств, для каждого из которых создаётся собственный обработчик. Что, кстати, делать вовсе не обязательно - есть вариант прицепить значение type к элементу в виде data-атрибута, и тогда можно будет использовать общий обработчик:

handleChange = ({ target: { value, dataset: { type } } }) => {
  if (value.length <= limits.user.max) {
    this.setState({
      [type]: value,
    });
  }
}

<input onChange={this.handleChange} data-type="xxx">
<input onChange={this.handleChange} data-type="yyy">
<input onChange={this.handleChange} data-type="zzz">

Но как мне их передать в дочку на отображение ?

<SearchHub error={error} isLoaded={isLoaded} items={items} />

Сама "дочка" будет выглядеть несколько иначе, чем у вас есть сейчас, как-то так:

class SearchHub extends Component {
  render(){
    const { error, isLoaded, items } = this.props;

    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <Loader type="big" active> </Loader>;
    } else {
      return (
        <div className={styles.parent}>
          <div>
            {items.map(item => (
              <Gapped gap={20} key={item.name}>
                <span><b>{item.rating.totalLove}</b></span>
                <span><img src={shape} alt="heart"/></span>
                <span><img src={item.avatarUri} alt="avatar" className={styles.photo}/></span>
                <span>{item.name}<br/>{item.role}</span>
              </Gapped>
            ))}
          </div>
        </div>
      );
    }
  }
}

Ещё у вас косяк при получении данных - перед запросом надо бы выставлять isLoaded: false и сбрасывать значение error, а иначе не будет видно индикатора загрузки, и после первой же ошибки невозможно больше будет увидеть никаких данных.

Самый простой вариант это передавать хандлер и данные через родителя:

class Parent extends Component {
  state = {
    search: '',
    data: [],
  };

  componentDidMount() {
    fetchData().then(({ data }) => this.setState({ data }));
  }

  handleFilterChange = e => {
    this.setState({ search: e.target.value });
  };

  render() {
    const { data, search } = this.state;
    const filteredData = data.filter(el => /* some stuff */);
    
    return (
      <Wrapper>
        <SearchFilter onChange={this.handleFilterChange} />
        <DataList data={filteredData} />
     </Wrapper>
    )
  }
}

handleInputChange(e) {
    let inputValue = e.target.value;
    clearTimeout(this.timeout);
    setTimeout(_ => this.fetchUsers(inputValue), 1000);
}

fetchUsers(value) {
     this.setState({isLoaded: false});
     axios.get(`url_to_get_users_by_name`, {param: value})
        .then((response) => response.json())
        .then(
            (result) => {
              this.setState({
                isLoaded: true,
                items: result.items
              });
            },
            (error) => {
              this.setState({
                isLoaded: true,
                error
              });
            }
          )
        .catch(error => console.log('parsing failed', error))
}