React возвращает несколько переменных из json

В настоящее время я пытаюсь реорганизовать проект React, над которым работаю. Файл становится довольно громоздким, поэтому я хотел разбить его на разные файлы. Мой исходный файл app.js содержит это состояние:

this.state = {
  selectProduct: [],
  quantityProduct: [],
  colorsProduct: [],
  stockProduct: [],
  turnaroundProduct: [],
  coatingProduct: [],
  attributeProduct: [],
  attributeMetaProduct: [],
}

Затем я запускаю функцию для выполнения запроса на выборку и обновляю состояние следующим образом:

pullProductDetails = () => {
  fetch('http://127.0.0.1:8000/product_details/fetch/36')
  .then(response => response.json())
  .then(json => {
    const quantityDetails = json.productQuanties.map((quantityDetail) => {
        quantityDetail.selected = false;
    });
    const colorDetails = json.productColor.map((colorDetail) => {
        colorDetail.selected = false;
    });
    const stockDetails = json.productPaperStock.map((stockDetail) => {
        stockDetail.selected = false;
    });
    const turnaroundDetails = json.productTurnaround.map((turnaroundDetail) => {
        turnaroundDetail.selected = false;
    });

    if (json.productCoating.length > 0) {
      const coatingDetails = json.productCoating.map((coatingDetail) => {
          coatingDetail.selected = false;
      }) }
    if (json.productAttributeMeta.length > 0) {
      const attributeMetaDetails = json.productAttributeMeta.map((attributeMetaDetail) => {
          attributeMetaDetail.selected = false;
      }) }

    this.setState(
      {
        quantityProduct: [...this.state.quantityProduct, ...json.productQuanties],
        colorsProduct: [...this.state.colorsProduct, ...json.productColor],
        stockProduct: [...this.state.stockProduct, ...json.productPaperStock],
        turnaroundProduct: [...this.state.turnaroundProduct, ...json.productTurnaround],
        coatingProduct: [...this.state.turnaroundProduct, ...json.productCoating],
        attributeProduct: [...this.state.attributeProduct, ...json.productAttribute],
        attributeMetaProduct: [...this.state.attributeMetaProduct, ...json.productAttributeMeta],
      },
      () => {console.info(this.state)}
    );
      });
}

Чтобы уменьшить размер моего файла app.js, я создал новый файл для приведенного выше кода, например:

// здесь мы получаем api, чтобы получить подробную информацию о каждом выпадающем списке продуктов

export const pullProductDetails = () => {
  fetch('http://127.0.0.1:8000/product_details/fetch/36')
  .then(response => response.json())
  .then(json => {
    const quantityDetails = json.productQuanties.map((quantityDetail) => {
        quantityDetail.selected = false;
    });
    const colorDetails = json.productColor.map((colorDetail) => {
        colorDetail.selected = false;
    });
    const stockDetails = json.productPaperStock.map((stockDetail) => {
        stockDetail.selected = false;
    });
    const turnaroundDetails = json.productTurnaround.map((turnaroundDetail) => {
        turnaroundDetail.selected = false;
    });

    if (json.productCoating.length > 0) {
      const coatingDetails = json.productCoating.map((coatingDetail) => {
          coatingDetail.selected = false;
      }) }
    if (json.productAttributeMeta.length > 0) {
      const attributeMetaDetails = json.productAttributeMeta.map((attributeMetaDetail) => {
          attributeMetaDetail.selected = false;
      }) }

      return [quantityDetails, colorDetails, stockDetails, turnaroundDetails, coatingDetails, attributeMetaDetails];

      });
}

В приведенном выше коде я пытаюсь вернуть каждую из этих переменных с данными json, чтобы я мог использовать их для установки состояния, но в моей консоли говорится, что переменная не существует. Я также попытался запустить консоль из файла js, и там написано undefined:

console.info(quantityDetails);

Я ожидал, что у меня будет доступ к переменным, поскольку я возвращаю их, но не могу этого сделать. Может ли кто-нибудь сообщить мне, что я делаю не так?