The error you're getting is what you get when you try to push to a frozen array:

const temp = Object.freeze([]);

temp.push(42);

You've shown that you're passing the array to DataGrid as rows. Apparently, DataGrid freezes the array, presumably because it needs to know that the contents of it don't change.

If you want to change those contents, you'll need to store temp in state and re-render after adding to it; see *** comments (I've also renamed temp to dataGridRows):

function Room() {

    const [textInput, setTextInput] = useState('');

    // *** Store it in state

    const [dataGridRows, setDataGridRows] = useState([]);



    const handleTextInputChange = (event) => {

        setTextInput(event.target.value);

    };



    const handleSubmit = () => {

        console.log('here goes');

        if (textInput !== '') {

            const refer = ref(database, 'rooms/');

            push(refer, textInput).then(() => {

                setTextInput('');

                toast.success('Added Successfully!');

            });

        }

    };



    useEffect(() => {

        const refer = ref(database, 'rooms/');

        onValue(refer, (snap) => {

            snap.forEach((child) => {

                console.log(child.val() + child.key);

                // *** Add to it in state; this will cause a re-render

                // so DataGrid picks up the change

                setDataGridRows(dataGridRows => [...dataGridRows, { id: child.key, firstName: child.val() }];

            });

        });

    }, []);



    return (

        <div>

            <Grid item xs={12}>

                <SubCard title="Room List">

                    <div style={{ height: 400, width: '100%' }}>

                        <DataGrid

                            rows={dataGridRows}

                            columns={columns}

                            pageSize={5}

                            rowsPerPageOptions={[5]}

                            components={{

                                Toolbar: CustomToolbar

                            }}

                        />

                    </div>

                </SubCard>

            </Grid>

        </div>

    )

}