How to preload a specific value using react-select

Question

I used react-select multi-select to choose a value in react and made a post request to an API. So basically, the label of the select displays a name while what is being sent to the database is an id that looks like this "65a531c7e04e780a3a702fdd" but then I want to edit that same item and make a put request. so I need to preload the select input this time but what is coming from the API is just that id without the name. Something like this -

    "data": {
    "_id": "65db636adc11e7260bd8f27e",
    "nameOfFood": "Hanae Vance",
    "kitchenId": "65a52c333972416e3ef579af",
    "dishTypeId": "65a52cbf3972416e3ef57ba8",
    "image": "https://pocketfood.s3.us-east-2.amazonaws.com/image/undefined/1708876620.jpeg",
    "description": "Nulla ipsam nihil la",
    "pricePerServing": 2000,
    "available": true,
    "isRecommendation": false,
    "mustHaveSideFood": true,
    "sideFoods": [
      "65a531c6e04e780a3a702fc6"
    ],
    "compulsoryExtras": true,
    "extras": [
      "65a531c7e04e780a3a702fcc"
    ],
    "menuIds": [
      "65a52d183972416e3ef57d3a"
    ],
    "foodTags": [
      "65a52c373972416e3ef57a30"
    ],
    "allergies": [],
    "isSpecial": false,
    "createdAt": "2024-02-25T15:57:30.931Z",
    "updatedAt": "2024-02-25T15:57:30.931Z",
    "__v": 0
  }

In this response, properties sideFoods, extras, menuIds, foodTags are what is returning an array of just the id, so I figured I could work with this since the options of the select input are still the same data as what the post request is working so I thought getting the id will make the name of the select show but I was wrong. What is preloading in the input field is the id instead of the name

    const handleChange = (newValue: any, actionMeta: ActionMeta<Options>) => {
    if (actionMeta.name === "foodTags") {
      setFoodInput((prevDetails: any) => ({
        ...prevDetails,
        foodTags: newValue ? newValue.map((option: any) => option.value) : [],
      }));
    } else if (actionMeta.name === "menuIds") {
      setFoodInput((prevDetails: any) => ({
        ...prevDetails,
        menuIds: newValue ? newValue.map((option: any) => option.value) : [],
      }));
    } else if (actionMeta.name === "extras") {
      setFoodInput((prevDetails: any) => ({
        ...prevDetails,
        extras: newValue.map((option: any) => option.label),
      }));
    } else if (actionMeta.name === "sideFoods") {
      setFoodInput((prevDetails: any) => ({
        ...prevDetails,
        sideFoods: newValue.map((option: any) => option.value),
      }));
    }
  };

Above is the onchange of the select I am using and this is the react-select component

<Select
                  options={menuOption}
                  key={menu?._id}
                  className="basic-multi-select"
                  classNamePrefix="select"
                  name="menuIds"
                  isMulti
                  onChange={handleChange}
                  // value={foodInput?.menuIds?.map((menu: any) => ({
                  //   label: menu,
                  //   value: menu,
                  // }))}
                  // value={menuOption.filter((option) =>
                  //   foodInput?.menuIds?.includes(option.value)
                  // )}
                  value={foodInput?.menuIds?.map((menuId: any) => ({
                    label: menu.find((m: any) => m._id === menuId)?.title,
                    value: menuId,
                  }))}
                  styles={customStyles}
                />

It can be seen that I have tried some methods to preload the value to show as name instead of as id. The first value is the one that preloads the id, while the last one which is uncommented is what chatgpt suggested I used to get the name but I got an empty string instead. While I also tried reaching out to the backend engineer to help with returning both the name and id but when I try to access the data.title, I also get the same empty string that I got with the chatgpt suggestion which made me realize that there is something I am doing wrong. Can someone please help me out on this?

For addition, when the situation is as is in image 2, if I select something, it is the id that shows. That is apart from preloading the id, even selecting the select options shows as id. I can change the onchange function to show option.label instead of option.value but the database does not accept name, it accepts the id instead. I don't know if I have been able to accurately explain my issue and if it is understandable from this but I would appreciate any form of advice.