I am using zod for a form in a React app.
In the form, there is a search textbox. You can type the search key words into that textbox to search for web sites and the search result (name of web sites) will be displayed as checkboxes. Then you can select the web sites you want by checking these checkboxes. I simply want to store the web sites url that have been checked in an array of string.

Usually, when you use a checkbox with zod, the value is a boolean (checked or not). I don’t know how to store string data (web site url) from a checkbox.
Also, the form is dynamic because if you search for, let say “sports”, you get checkboxes for sports websites. If you change the search keywords for “news”, the sports checkboxes will be replaced for “news” web sites, but the selected “sports” web site urls must have been stored somewhere.

You can see here the zod validation schema I am using.

const zodValidationSchema = z.object({
   zodSitesUrls: z.string()
     .array()
     .min(1, { message: "You must choose at least one web site" })
 });

There you can see that I am using map to display the checkboxes. This is working fine! But
I am wondering how to store the web sites url…

{webSites?.map((ns, index) => (
              <Controller
                name={`zodSitesUrls.${index}`}
                control={control}
                render={({ field }) =>
                  <Checkbox {...field}
                    label={ns.siteName}
                    onChange={(e, isChecked) => onChangeWebSite(e, isChecked, ns.siteUrl)}
                  />
                }
               />
      )}

I could use the onChange checkboxes event of the selected web site url, but I don’t know how to store the url into the zod schema.

If you can give me any tips or suggestions on how to do that, I would be happy!
Thanks a lot in advance!