React hooks only setting the initial state

Question

React noob here. I'm trying to set the state on the onChange trigger. But it's not taking the textbox value and setting it. It continues to keep the initial value.

import React, { useState, useCallback, useEffect } from "react";
import {  Button, Form, Checkbox, TextField, FormLayout, Select, Spinner, Toast, Banner } from "@shopify/polaris";

function CourierSettings() {

    const [isLoading, setIsLoading] = useState(false);
    const toggleLoading = useCallback(() => setIsLoading((isLoading) => !isLoading), []);

    const handleSubmit = useCallback((_event) => { }, []);

    const spinnerMK = isLoading ? (
        <Spinner accessibilityLabel="Updating" size="small"/>
    ) : 'Save';

    const [clientId, setClientId] = useState('test');
    const [clientIdError, setClientIdError] = useState('');
    const handleClientIdChange = useCallback((newValue) => {
        console.log(newValue); setClientId(newValue); console.log(clientId)
    }, []);

    return (
        <Form onSubmit={handleSubmit}>
            <FormLayout>
                
                <TextField
                    requiredIndicator={true}
                    label="Client ID"
                    value={clientId}
                    onChange={handleClientIdChange}
                    autoComplete="off"
                    error={clientIdError}
                />
                <Button submit>{spinnerMK}</Button>
            </FormLayout>
        </Form>
    );
}

export default CourierSettings;

In the code above, when I console log the clientId value, it only displays the initial value.

I've also tried using onChange={setClientId} but haven't worked either.

No errors in the console either.

Any help is greatly appreciated.