Filamentphp keyValue field not storing or fetching json correctly

I am trying to make use of filaments KeyValue field, but I must surely be missing something as the storing or fetching of the json data is not displaying in the field as expected. Please see the attached image.

My Migration
$table->json('fields')->nullable();

My Model

    protected $cast = [
        'fields' => 'json'
    ];

My Field in the Resource class

    FormsComponentsSection::make('Dynamic Fields')
    ->schema([
        FormsComponentsKeyValue::make('fields')
            ->keyLabel('Field name')
            ->valueLabel('Field value')
            ->reorderable(),
    ]),

What am I missing? Please help.

Displaying of data in KeyValue field

1. I tried changing the field type to text and casting the field to array and to json and still had the same result.