我在我的项目中使用ant design，所以我需要向我的表单添加标签，以便用户选择它，直到现在我才添加标签，它只允许一个选项选择并向用户显示它，但现在我想移动到多选功能。
下面是单选功能的代码。
父组件

import CheckableAntTag from "../../../../../../components/Tags";

export default function FormSection() {
  const mortgageData = [
    "Porque me foi recomendado",
    "Quero comparar com o seguro que tenho atualmente",
    "Para estar protegido(a) caso algo aconteça",
    "O meu seguro vai renovar-se em breve",
  ];

  const formik = useFormik({
    enableReinitialize: true,
    initialValues: {
      insuranceMotive: null,
    },

    onSubmit: (values) => {
      console.log(values);
    },
    validationSchema: validationSchemaSectionOne, //schema which validates the input with the help of Yup
  });

  return (
    <div className="firstSection">
      <form onSubmit={formik.handleSubmit}>
        <div className="selectable-tags-mortgage">
          {mortgageData.map((tag, index) => (
            <CheckableAntTag //Reusale component to select tags on click
              tag={tag}
              key={index}
              setValue={(val) => formik.setFieldValue("insuranceMotive", val)}
              value={formik.values.insuranceMotive}
            />
          ))}
        </div>
        {formik.errors.insuranceMotive && formik.touched.insuranceMotive && (
          <div className="formik-errors">{formik.errors.insuranceMotive}</div>
        )}
      </form>
    </div>
  );
}

标记组件

export default function CheckableAntTag({ tag, value, setValue }) {
  const { CheckableTag } = Tag

  return (
    <CheckableTag
      style={{
        backgroundColor: tag === value ? '#AACECD' : 'white'
      }}
      className="selectable-ant-tags"
      key={tag}
      checked={tag === value}
      onChange={() => setValue(tag)}>
      {tag}
    </CheckableTag>
  )
}

这很好，通过突出显示用户选择的标记来显示它，但我一直坚持在这里启用多选功能，以及formik
希望有人能帮助我，谢谢！