cómo poner cada tercer elemento de un mapa de matriz en un div reaccionar

Esta es mi clase de usuario dentro de ella, estoy creando accesorios

  class User extends React.Component {
        constructor() {
            super();
        }

    render() {

        const usersStyle = {
            background: 'yellow',
            border: '1px solid black'
        }

        return <div className="users" style={usersStyle}>
            <p>имя: {this.props.name}</p>
            <p>фамилия: {this.props.surname}</p>
        </div>;
    }
}  

Esta es mi clase de aplicación dentro de ella, creé una matriz de usuarios y dentro de la matriz hay seis objetos, cada triple de objetos debe ir dentro de un div

class App extends React.Component {
        constructor() {
            super();

    this.state = {
        users: [
            { name: 'Коля', surname: 'Иванов' },
            { name: 'Вася', surname: 'Петров' },
            { name: 'Петя', surname: 'Сидоров' },
            { name: 'Пётр', surname: 'Иванов' },
            { name: 'Алейсей', surname: 'Петров' },
            { name: 'Сергей', surname: 'Сидоров' },
        ],
    };
}

Aquí creé un mapa

render() {
const users = this.state.users.map((item, index) => {
    return <p>{item.name}</p>
});

Aquí ocurre la lógica en sí, creé una matriz llamada resultsRender creada y verifiqué si i% 3 === 2 agregué un nuevo div, pero cómo colocar tres elementos dentro de la clase clearfix

    var resultsRender = [];
    for (var i = 0; i < users.length; i++) {
        resultsRender.push(users[i]);
        if (i % 3 === 2) {
            resultsRender.push(
                <div className="clearfix">
                    
            </div>
            );
        }
    }

    return <div>
        {resultsRender}
    </div>;
}

}

Quiero hacerlo asi

        <div class="clearfix">
            <p>Коля</p>
            <p>Вася</p>
            <p>Петя</p>
        </div>

        <div class="clearfix">
            <p>Пётр</p>
            <p>Алейсей</p>
            <p>Сергей</p>
        </div>

Pero lo entiendo así

       <p>Коля</p>
       <p>Вася</p>
       <p>Петя</p>
       <div class="clearfix"></div>
       <p>Пётр</p>
       <p>Алейсей</p>
       <p>Сергей</p>
       <div class="clearfix"></div>