didn't pass in proper value to autocomplete renderer

lib/editors/KeyValueEditor.js

@@ -1,5 +1,6 @@
 import Handsontable from 'handsontable';
 import { MULTIVALUED_DELIMITER, titleOverText } from '@/lib/utils/fields';
+import { isEmptyUnitVal } from '@/lib/utils/general';
 
 // Derived from: https://jsfiddle.net/handsoncode/f0b41jug/
 
@@ -134,11 +135,11 @@ export const keyValueListRenderer = function (
   cellProperties
 ) {
   // Call the autocomplete renderer to ensure default styles and behavior are applied
-
-  const item = cellProperties.source.find(({ _id }) => _id === value);
   Handsontable.renderers
     .getRenderer('autocomplete')
-    .apply(this, [hot, TD, row, col, prop, item, cellProperties]);
+    .apply(this, [hot, TD, row, col, prop, value, cellProperties]);
+
+  const item = cellProperties.source.find(({ _id }) => _id === value);
   if (item) {
     // Use the label as the display value but keep the _id as the stored value
     const label = item.label;
@@ -156,7 +157,7 @@ export const multiKeyValueListRenderer = (field) => {
       .getRenderer('autocomplete')
       .apply(this, [hot, TD, row, col, prop, value, cellProperties]);
 
-    if (!(value === null || value === '' || typeof value === 'undefined')) {
+    if (!(isEmptyUnitVal(value))) {
       const label = value
         .split(MULTIVALUED_DELIMITER)
         .map((key) => titleOverText(merged_permissible_values[key]))