Reactjs – In React, is passing a decently big object better or should I just pass the required fields of an object?

Let’s say I have a function that retrieves data from API and the API returns array of objects. Each object has a lot of fields(20 or so). Now I want to use ONLY ‘id’ and ‘name’ of each object.

Is it better to use that map function to reduce the objects to 2 fields each or would it be better to just pass the object as is and let the Dropdown component destructure the fields itself?

const SomeComponent () =>{
const [companies, setCompanies] = useState([]);

const fetch =async () => {
await api.get("/companies").then((response) => {
      const rows = response.data.rows;

      const updateCompanies = rows.map((item) => ({
        //extract only name and id of statusLabels
        id: item.id,
        name: item.name,
      }));

      setCompanies(updateCompanies); //set companies
    })
};

useEffect(()=>{
 if(companies.length === 0){
 (async () => await fetch())();
}
},[])


return (
<>
      <Dropdown
        data={companies}
        placeholderStyle={styles.placeholder}
        labelField="name"
        valueField="id"
        placeholder={"Companies"}
        onChange={(item) => {
          setCompanyFilter(item.id);
        }}
        style={styles.inputContainer}
      />
</>

)


}

tried passing both ways but i don’t know how to benchmark