Problemy z wyodrębnianiem wartości z funkcji zewnętrznej

Próbuję uczynić komponent Div z niewielką klasą. Będę musiał go później ocenić w stanie obiektu, więc robię go tak, że klasa Div wynosi "Piece" State. Aby zmienić stan, stworzyłem funkcję w zewnętrznym pliku JS, który zwraca wartość losową z danej listy, jako takie:

var pieceAssignment = function() {
    const pieceValues = [
        "blue-piece",
        "green-piece",
        "purple-piece",
        "red-piece"
    ];

    var i = Math.floor(Math.random() * 4);
    var pieceClass = pieceValues[ i ];

    return pieceClass
}

exports.pieceAssignment = pieceAssignment;

Sprawdziłem funkcję za pomocą prostego alertu i działa pozornie w porządku. Nie mogę jednak przypisać go w samym komponencie.

import React, { Component } from 'react';
var pieceAssignment = require('../util/PieceAssignment').pieceAssignment;

class X1Y1 extends Component {
    constructor(props){
        super(props);
        
        this.assignNewPiece = this.assignNewPiece.bind(this);

        this.state = {
            piece: null,
            type: 'regular',
            layers: 0,
            xCoordinate: 1,
            yCoordinate: 1,
        }
    }

    assignNewPiece() {
        var newPiece = new pieceAssignment();

        this.setState = {
            piece: newPiece
        }
    }

    componentDidMount(){
        this.assignNewPiece();
    }

    render() {
        return(
            <div className="game-cell">
                <div className= { this.state.piece } onClick={ this.assignNewPiece }></div>
            </div>
        )
    }
}

export {
    X1Y1
}

Jedną z strategii, które wykorzystywałem do debugowania, było przypisanie this.state = {piece: new pieceAssignment()}, w którym to przypadku składnik został renderowany z klasą [Obiekt obiektu].

Próbowałem każdego rozwiązania, które mogłem znaleźć na 5 stronach Google i nadal nie znalazłem sposobu na wyodrębnienie wartości i poprawnie przypisania go do klasy div.

Jakieś wskazówki?