javascript - Memo in Dynamic Form Field

Question

I use this: https://codesandbox.io/s/wonderful-lichterman-br63z

and what I want to achieve is: adding some fields by using the passed component props.

So what I basically tried is to use a hook for adding:

const ExperienceFieldSet = ({ data: { entries, listName, btnText } }) => {
  useEffect(() => {
    entries.forEach((el) => {
      addFn({ jobdescription: el });
    });
  }, [addFn]);

  const fieldComponent = (
    <Form.List name={listName}>
      {(fields, { add, remove }) => {
        if (!addFn) {
          addFn = add;
        }
        return (
          <div className="experienceItems">
            {fields.map((field) => (

The problem is, this hook is called two times. What can I do to prevent this ?

I tried to wrap a React.memo around the fieldComponent like:

React.memo(fieldComponent)

But it says:

uncaught (in promise) Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, compare}). If you meant to render a collection of children, use an array instead.

Is there a nicer solution to do so ?