Help needed with building a nested category system in JavaScript

import { TextInput, Stack, Text } from '@sanity/ui'

...

const MaxConstraint = type.validation[0]._rules.filter(rule => rule.flag == 'max')[0].constraint

const handleChange = React.useCallback(
  (event) => {
    const inputValue = event.currentTarget.value
      onChange(PatchEvent.from(inputValue ? set(inputValue) : unset()))
  },
  [onChange]
)

...

<Text muted size={1}>{value ? value.length : '0'} / {MaxConstraint}</Text>

/ A function that returns only objects containing specified key/value pairs.
// Not all validation rules are required for this component.
// ! Be sure that your schema validation rules are concatenated `Rule.min(20).max(50)` and not passed as an array of rules `[Rule.min(20), Rule.max(50)]`

function findByKeyValue(array: any, key: any, value: any) {
  var result = array.find(function (obj: any) {
    return obj[key] === value;
  });
  return result || null;
}

export function CharacterCounterField(props: any) {

  // Assign our array for ease of use
  const rulesArray = props.schemaType.validation[0]._rules;
  // Get our min and max values from the validation rules
  const min = findByKeyValue(rulesArray, "flag", "min");
  const max = findByKeyValue(rulesArray, "flag", "max");
  
  // Set our colour based on the length of the value
  // @TODO Can this be logical query be improved?
  let myColour;
  max !== null &&
  props.value?.length < max.constraint &&
  min !== null &&
  props.value?.length > min.constraint
    ? (myColour = "green")
    : (myColour = "red");

  return (
    <Stack space={3}>
      {!-- @TODO Customise TextInput for green bg and borders when in range --}
      {props.renderDefault(props)}
      <Text
        size={1}
        style={{
          color: myColour,
        }}
      >
        Characters: {props.value?.length || 0}.
      </Text>
    </Stack>
  );
}