This synthetic event is reused for performance reasons

Question

I have this Form.List component of antd library in react,when i select any options in salesman, i get so many warning stating that:

index.js:1 Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property pageX on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist().

This is the code:

<Form.List name="salesmans" initialValue={personList}>
    {(fields, { add, remove }) => {
      const newfields = fields.filter(
        (field) => field.name !== '0'
      )
      return (
        <>
          {newfields.map((field, index) => (
            <React.Fragment key={index}>
              <Col md={10}>
                <AutoFieldComponent
                  name={[field.name, 'salesperson']}
                  label={`Salesman ${index + 1}`}
                  options={salesOptions}
                  rules={[
                    {
                      required: index === 0,
                      message: 'Please select Salesman',
                    },
                  ]}
                  filterOption={(input, option) => {
                    return option?.label
                      ?.toLowerCase()
                      .includes(input?.toLowerCase())
                  }}
                  existingValue={
                    projectData?.salesPersons[field?.name]
                  }
                  placeholder={`select salesman ${index + 1}`}
                  type="text"
                  values={0}
                />
              </Col>
              <div className="detete-icon">
                <Button
                  title={'Delete Salesman'}
                  onClick={() => {
                    remove(field.name)
                  }}
                  disabled={index === 0}
                  icon={<DeleteIcon />}
                />
              </div>
            </React.Fragment>
          ))}
          <Col md={12} className="sales-btn">
            <Button
              onClick={add}
              type="link"
              className="add-package"
              label="Add another salesman"
              icon={<AddPackage />}
            />
          </Col>
        </>
      )
    }}
  </Form.List>

Answer 1

This has something to do with handling events. OnClick function of the delete button seems fine, but you should check the add() handler.

Probably you are trying to access events properties in asynchronous function (example : you are trying to set a state)

You need to assign variables from the event at the beginning of the add() handler so you can use them later

Here's the example

EDIT:

Use onClick={() => add()} like this and not like this onClick={add} because the types of onClick() and add() function don't match. You can check add() type in the Ant Design documentation