React App throwing error – Something went wrong

I want to add Options value in the reportFields List dynamically using the categoryOptions state management which get the values from the getAllCategories function. I’m going somewhere wrong but don’t know where.

    import { useState, useEffect } from 'react';
    
    const getAllCategories = () => {
      let url = `/category/list/active`;
      return http.get(url)
        .then(response => {
          const data = response.data;
          if (data.ok) {
            return data.data;
          } else {
            return [];
          }
        })
        .catch(error => {
          console.error('Error:', error);
          return [];
        });
    };
    
    interface Category {
      id: string;
      name: string;
    }
    
    const [categoryOptions, setCategoryOptions] = useState([]);
    
    useEffect(() => {
      async function getCategoryOptions() {
        const categories = await getAllCategories();
        setCategoryOptions(
          categories.map((category: Category) => ({
            value: category.name,
            text: category.name,
          }))
        );
      }
      getCategoryOptions();
    }, []);
    
    
    export const reportFields = [
      {
        "headerName": "Category",
        "field": "category_id",
        "disabled":false,
        "default":true,
        "prefix": "",
        "suffix": "",
        "dbField": "final.category_name",
        "type": "string",
        "options": categoryOptions
      }
    ]