// Break down the AdvancedTargetingCard component into smaller components
    // For example, you could create a separate component for the SegmentEditor
    const SegmentEditorComponent = ({...props}) => {
      // SegmentEditor logic here
    }

    // Then use this new component in the AdvancedTargetingCard
    const AdvancedTargetingCard = ({...props}) => {
      // AdvancedTargetingCard logic here

      return (
        <div>
          {/* Other components */}
          <SegmentEditorComponent {...props} />
          {/* Other components */}
        </div>
      )
    }

    function createFilter(filter, idx) {
      const { attributeClass } = filter;
      let resource: TSegmentAttributeFilter | TSegmentPersonFilter;
      if (attributeClass.name === "userId" && attributeClass.type === "automatic") {
        resource = {
          id: createId(),
          root: {
            type: "person",
            personIdentifier: "userId",
          },
          qualifier: {
            operator: filter.condition,
          },
          value: filter.value,
        };
      } else {
        resource = {
          id: createId(),
          root: {
            type: "attribute",
            attributeClassName: attributeClass.name,
          },
          qualifier: {
            operator: filter.condition,
          },
          value: filter.value,
        };
      }

      const attributeSegment: TBaseFilter = {
        id: filter.id,
        connector: idx === 0 ? null : "and",
        resource,
      };

      return attributeSegment;
    }