Unable to set custom field value on the chat transcript object from pre-chat using Embedded Service

I am using an embedded service deployment to show a chat window on a publicly hosted webpage. This chat has a pre-chat form configured where I take in the contact details. I want to input some additional fields like subject and message from the user and store it in a custom field on the LiveChatTranscript Object record. The reason I am using a custom field instead of storing it directly on the Case is so that I can decide from the subject if there is an existing case that I should attach to the chat, or should I create a new Case.

Here is the code I am using for storing custom field Subject:

embedded_svc.snippetSettingsFile.extraPrechatFormDetails = [
    {
        "label": "Case Subject",
        "transcriptFields": ["CaseSubject__c"],
        "displayToAgent":true
    }
];

Even after adding this code, I am just seeing the FirstName, LastName, and Email fields which I have configured in the Pre-chat page and not this additional subject field.

I also need to confirm where actually we need to write this code and if I am missing anything.

embedded_svc.snippetSettingsFile.extraPrechatFormDetails = [
{
    "label": "Case Subject",
    "transcriptFields": ["CaseSubject__c"],
    "displayToAgent":true,
    "value": "Subject for the case"
}];