مشکل در کتابخانه react select

سلام به اساتید خسته نباشید
من رو یک فرمی دارم کار میکنم که لیستی از دسته بندی غذاها رو میسازه
و اون رو تو یک صفحه مربوط به سفره نمایش میده
الان میخوام با این فرمی که دارم از کتابخانه react-select استفاده کنم و اینارو تغییر بدم که قابلیت جستجو و اضافه کردن چند آیتم رو داشته باشه
چند روشی که از یوتوب دیدم امتحانش کردم ولی موفق نشدم درستش کنم
ممنون میشم اگه بتونید راهنمایی کنید که مشکلمو حل کنم

import React, { useState, useEffect } from "react";
import { isAuthenticated } from "../auth";
import {
    createFood,
    getSandwiches,
    getPizzas,
    getSalads } from "./apiAdmin";

const AddFood = () => {
    const [salads, setSalads] = useState([]);
    const [pizzas, setPizzas] = useState([]);
    const [values, setValues] = useState({
        title: "",
        description: "",
        price: "",
        sandwiches: [],
        sandwich: "",
        loading: false,
        error: "",
        createdFood: "",
        redirectToProfile: false,
        formData: ""
    });

    const { user, token } = isAuthenticated();
    const {
        title,
        description,
        price,
        sandwiches,
        sandwich,
        loading,
        error,
        createdFood,
        // redirectToProfile,
        formData
    } = values;

    const init = () => {
        getSandwiches().then(data => {
            if (data.error) {
                setValues({ ...values, error: data.error });
            } else {
                setValues({
                    ...values,
                    sandwich: data,
                    formData: new FormData()
                });
                initPizza();
                initSalad();
            }
        });
    };

    // load pizza and set form data
    const initPizza = () => {
        getPizzas().then(data => {
            if (data.error) {
                setValues({ error: data.error });
            } else {
                setPizzas(data);
            }
        });
    };

    // load foods and set form data
    const initSalad = () => {
        getSalads().then(data => {
            if (data.error) {
                setValues({ error: data.error });
            } else {
                setSalads(data);
            }
        })
    };

    useEffect(() => {
        init();
    }, []);

    const handleChange = name => event => {
        const value =
            name === "photo" ? event.target.files[0] : event.target.value;
        formData.set(name, value);
        setValues({ ...values, [name]: value });
    };

    const clickSubmit = event => {
        event.preventDefault();
        setValues({ ...values, error: "", loading: true });

        createFood(user._id, token, formData).then(data => {
            if (data.error) {
                setValues({ ...values, error: data.error });
            } else {
                setValues({
                    ...values,
                    title: "",
                    description: "",
                    price: "",
                    loading: false,
                    createdFood: data.name
                });
            }
        });
    };

    const newPostForm = () => (
        <form
        onSubmit={clickSubmit}
        className="mb-3"
        >
                  <div className="form-group">
                    <input
                    onChange={handleChange("title")}
                    type="text"
                    className="form-control"
                    value={title}
                    placeholder="نام غذا"
                    />

                            <select
                                onChange={handleChange("sandwich")}
                                className="form-control"
                            >
                                <option>ساندویچ</option>
                                {sandwiches &&
                                    sandwiches.map((s, i) => (
                                        <option key={i} value={s._id}>
                                            {s.name}
                                        </option>
                                    ))}
                            </select>

                            <select
                                onChange={handleChange("pizza")}
                                className="form-control"
                            >
                                <option>پیتزا</option>
                                {pizzas &&
                                    pizzas.map((p, i) => (
                                        <option key={i} value={p._id}>
                                            {p.name}
                                        </option>
                                    ))}
                            </select>

                            <select
                                onChange={handleChange("salad")}
                                className="form-control"
                            >
                                <option>سالاد</option>
                                {salads &&
                                    salads.map((s, i) => (
                                        <option key={i} value={s._id}>
                                            {s.name}
                                        </option>
                                    ))}
                            </select>
                                <input
                                    onChange={handleChange("price")}
                                    type="number"
                                    className="form-control"
                                    placeholder="قیمت"
                                    value={price}
                                />
                            <div className="container mt-3">
                              <div className="row">
                                    <textarea
                                        onChange={handleChange("description")}
                                        type="text"
                                        rows="10"
                                        className="form-control"
                                        value={description}
                                    />
                              </div>
                            </div>
                          </div>
                  <div className="action_btn offset-lg-3">
                  <button className="btn btn-success mt-3">ثبت غذا</button>
                </div>
              </form>
    );
    return (
            <div className="row">
                <div
                 style={{
                    paddingTop: "40px",
                    paddingBottom: "40px",
                    width: "100%",
                    maxWidth: "900px",
                    margin: "0 auto",}}
                className="col-md-8 offset-md-2"
                >
                    {newPostForm()}
                </div>
            </div>
    );
};

export default AddFood;