Converting React Class Component to a Function Component

As per feedback from this question. I'm trying to convert this WrappedApp class component to a function component.

This is the existing (working) class component:

class WrappedApp extends Component {
      constructor(props) {
        super(props);
        this.state = {
          filterText: "",
          favourites: [],
        };
      }

      // update filterText in state when user types
      filterUpdate(value) {
        this.setState({
          filterText: value,
        });
      }

      // add clicked name ID to the favourites array
      addFavourite(id) {
        const newSet = this.state.favourites.concat([id]);
        this.setState({
          favourites: newSet,
        });
      }

      // remove ID from the favourites array
      deleteFavourite(id) {
        const { favourites } = this.state;
        const newList = [...favourites.slice(0, id), ...favourites.slice(id + 1)];
        this.setState({
          favourites: newList,
        });
      }

      render() {
        const hasSearch = this.state.filterText.length > 0;
        return (
          <div>
            <header>
              <Greeting />
              <Search
                filterVal={this.state.filterText}
                filterUpdate={this.filterUpdate.bind(this)}
              />
            </header>
            <main>
              <ShortList
                data={this.props.data}
                favourites={this.state.favourites}
                deleteFavourite={this.deleteFavourite.bind(this)}
              />

              <TagsList
                data={this.props.data}
                filter={this.state.filterText}
                favourites={this.state.favourites}
                addFavourite={this.addFavourite.bind(this)}
              />
              {/* 
                Show only if user has typed in search.
                To reset the input field, we pass an 
                empty value to the filterUpdate method
              */}
              {hasSearch && (
                <button onClick={this.filterUpdate.bind(this, "")}>
                  Clear Search
                </button>
              )}
            </main>
          </div>
        );
      }
    }

    export default WrappedApp;

This code is used/referenced in the WrappedApp component and the new functional component:

const Tag = ({ id, info, handleFavourite }) => (
  <li className={info.count} onClick={() => handleFavourite(id)}>
    {info.label} ({info.tag_related_counts_aggregate.aggregate.count})
  </li>
);
const ShortList = ({ favourites, data, deleteFavourite }) => {
  const hasFavourites = favourites.length > 0;
  const favList = favourites.map((fav, i) => {
    return (
      <Tag
        id={i}
        key={i}
        info={data.find((tag) => tag.id === fav)}
        handleFavourite={(id) => deleteFavourite(id)}
      />
    );
  });
  return (
    <div className="favourites">
      <h4>
        {hasFavourites
          ? "Shortlist. Click to remove.."
          : "Click on a tag to shortlist it.."}
      </h4>
      <ul>{favList}</ul>
      {hasFavourites && <hr />}
    </div>
  );
};


const TagsList = ({ data, filter, favourites, addFavourite }) => {
  const input = filter;

  // Gather list of tags
  const tags = data
    // filtering out the tags that...
    .filter((tag, i) => {
      return (
        // ...are already favourited
        favourites.indexOf(tag.id) === -1 &&
        // ...are not matching the current search value
        !tag.label.indexOf(input)
      );
    })
    // ...output a <Name /> component for each name
    .map((tag, i) => {
      // only display tags that match current input string
      return (
        <Tag
          id={tag.id}
          key={i}
          info={tag}
          handleFavourite={(id) => addFavourite(id)}
        />
      );
    });

  /* ##### the component's output ##### */
  return <ul>{tags}</ul>;
};


// need a component class here
// since we are using `refs`
class Search extends Component {
  render() {
    const { filterVal, filterUpdate } = this.props;
    return (
      <form>
        <input
          type="text"
          ref="filterInput"
          placeholder="Type to filter.."
          // binding the input value to state
          value={filterVal}
          onChange={() => {
            filterUpdate(this.refs.filterInput.value);
          }}
        />
      </form>
    );
  }
}

This is my initial unsuccessful attempt to convert the WrappedApp class component to a function component:

function WrappedApp(props) {
  const [filterText, setfilterText] = useState("");
  const [favourites, setFavourites] = useState([]);

  // update filterText in state when user types
  const filterUpdate = (value) => {
    setfilterText(value);
  };

  // add clicked name ID to the favourites array
  const addFavourite = (id) => {
    const newSet = favourites.concat([id]);
    setFavourites(favourites);
  };

  // remove ID from the favourites array
  const deleteFavourite = (id) => {
    const newList = [...favourites.slice(0, id), ...favourites.slice(id + 1)];
    setFavourites(newList);
  };

  const hasSearch = filterText.length > 0;
  return (
    <div>
      <header>
        <Greeting />
        <Search filterVal filterUpdate />
      </header>
      <main>
        <ShortList data={props.data} favourites deleteFavourite />

        <TagsList
          data={props.data}
          filter={filterText}
          favourites
          addFavourite
        />
        {/* 
            Show only if user has typed in search.
            To reset the input field, we pass an 
            empty value to the filterUpdate method
          */}
        {hasSearch && <button onClick={filterUpdate}>Clear Search</button>}
      </main>
    </div>
  );
}

export default WrappedApp;

What error am I seeing?

Initial issue I am encountering is the TypeError: favourites.map is not a function error message.