How to correctly change a rendered text's color in fabric.js

Question

I am trying out fabric.js and wanted to change color of text after it has been rendered, but it is not working properly. I created a text object added it to group and then rendered it, after that I have a color input when it is changed I want the text fill to change.

js

    function addText(){
    (() => {
        let textValue = document.getElementById("text").value;

        var text = new fabric.IText(textValue, {
            fontSize: 14,
            left: 0,
            top: 0,
            fill: 'red',
            originX: 'left',
            originY: 'left'
        });


        var group = new fabric.Group([text], {
            left: 100,
            top: 100,
            originX: 'center',
            originY: 'center',
            width: 100,
            height: 100,
            objectCaching: false
        });

        canvas.add(group);

        group.on('mousedblclick', () => {
            text.enterEditing();
            canvas.once('selection:cleared', () => {
            text.exitEditing();
            });
        });
    })();
    
    
    canvas.renderAll();
    }

    function changeColor(){
     let cValue = document.getElementById('text-color').value;
     console.log(cValue);
     canvas.getActiveObject().set({fill: cValue});
     canvas.renderAll();
    }

And here is the html part

    Add Text :- 
        <input type="text" id="text" name="text" onkeydown="if (event.keyCode == 13) return 
         false;" >
        <button type="button" onclick="addText()">Add Text</button>
        <input type="color" value="" id="text-color" size="10" onchange="changeColor()">

Answer 1

Changing the useEffect in room to contain the following fixed the issue:

    useEffect(() => {
        console.log('the use effect ')
        socket.on('broadcast', data => {
            console.log(messagesData)
            // let previousData = messagesData
            // previousData.push(data)
            // setMessagesData(previousData)
            setMessagesData(prev => prev.concat([data]))
        })
    }, [socket])```