How to filter for values inside an array of objects for React Table?

I am able to solve this by using a custom accessor. This solution changes the data from array of objects to an array of string instead, making such that my global filter will work. I hope this help someone!

   {
            Header: "Competitors",
            // This is a custom accessor to get the string, name. Mainly for the search.
            accessor: (data: { competitors: Competitor[] }) => {
              const output: string[] = [];
              data.competitors.map((c) => {
                return output.push(c.name);
              });
              return output;
            },
            Cell: ({ cell }: { cell: CellProps<TableInstance> }) => {
              return (
                <div className="flex flex-wrap gap-y-1 items-center">
                  {cell.value.map((name: string, i: number) => {
                    return (
                      <div key={i}>
                        <span
                          key={i}
                          className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 mx-1"
                        >
                          {name}
                        </span>
                      </div>
                    );
                  })}

                  <MiniPlusButton onClick={() => console.log("asdasd")} />
                </div>
              );
            },
          },

Actually you don't need to change accessor. All is needed to wright custom filter function, there you can grub whole object and wright any kind of condition for look up. f.e.

const orderItemsFilter: FilterFn<any> = (row, columnId, value, addMeta) 
=> {
  // Rank the item
  const itemRank = rankItem(
    row.original.order_items
      .map((item: OrderItemType) => item.product_name)
      .join(" "),
    value,
  );

  // Store the itemRank info
  addMeta({
    itemRank,
  });

  // Return if the item should be filtered in/out
  return itemRank.passed;
};