When I click add input, it brings another one from the same input, but this time the name property is the same. I tried to put it in the photos array with different names. but I couldn't. A string expression is entered into the photos input. How can I collect these inputs into photos:[] with formik

const{handleSubmit,handleChange,handleBlur,errors,touched} = useFormik({
    initialValues:{
      title:"",
      price:"",
      description:"",
      photos:[],
   
    },
    onSubmit:(values)=>{
     
     console.log(values);
    
     
    }
  })


{fields.map((field, index) => (
              <Form.Item
                
                label={"Product Image"}
                required={false}
                key={field.key}
              >
                <Form.Item
                  {...field}
                  
                  noStyle
                >
                  <Input name={fields.length > 1 ? `photos[${fields.length}]` : "photos[0]"} onChange={handleChange} onBlur={handleBlur} placeholder="Enter a image url..." style={{ width: '60%' }} />
                </Form.Item>
                {fields.length > 1 ? (
                  <MinusCircleOutlined
                    className="ms-1 dynamic-delete-button"
                    onClick={() => remove(field.name)}
                  />
                ) : null}
              </Form.Item>
            ))}
<Form.Item className="text-center">
              <Button
                type="dashed"
                onClick={fields.length < 5 ? () => add() : null}
              
                
              >