How to add a div in map every 4 iterations?

I want to add the div below every 4 iterations.

<div className="clearBoth"></div>

How to accomplish this?

        {portfolio?.map((portf, index) => (
          
            <Item
                original={require('../img/' + folder + '/' +
                portf.src)}
                thumbnail={require('../img/' + folder + '/' +
                portf.src)}
                >
                {({ ref, open }) => (
                    <img ref={ref} onClick={open} src={require('../img/' + folder + '/' +
                    portf.src)} className={'associatedMedia' + index } />
                )}
            </Item>

        ))}

>Solution :

Assuming that <div> is to be added after every 4 Item, perhaps try:

// React might need to be imported

{
  portfolio?.map((portf, index) => (
    <React.Fragment key={index}>
      <Item
        original={require("../img/" + folder + "/" + portf.src)}
        thumbnail={require("../img/" + folder + "/" + portf.src)}
      >
        {({ ref, open }) => (
          <img
            ref={ref}
            onClick={open}
            src={require("../img/" + folder + "/" + portf.src)}
            className={"associatedMedia" + index}
          />
        )}
      </Item>
      {index !== 0 && (index + 1) % 4 === 0 && (
        <div className="clearBoth"></div>
      )}
    </React.Fragment>
  ))
}