How to create a custom input component in Sanity for updating fields based on dropdown selection

export default {
  name: 'displayOptions',
  title: 'Display Options',
  type: 'object',
  fields: [
    { 
      name: 'shortlist',
      title: 'Shortlist',
      type: 'boolean',
      initialValue: false,
      options: { layout: 'checkbox' },
    },
    { 
      name: 'extended',
      title: 'Extended',
      type: 'boolean',
      description: 'TODO:',
      initialValue: false,
      options: { layout: 'checkbox' },
    },
    { 
      name: 'omitted',
      title: 'Omitted',
      type: 'boolean',
      initialValue: false,
      options: { layout: 'checkbox' },
    },
  ],
}

export default {
  name: 'management',
  title: 'Management',
  type: 'object',
  fields: [
    { 
      name: 'accessId', 
      title: 'Access ID', 
      type: 'string' 
    },
    { 
      name: 'hotelStatusType', 
      title: 'Hotel Status Type',
      type: 'tag',
      options: {
        predefinedTags: [
          {label: 'Extended, value: 'extended'},
          {label: 'Another Status', value: 'anotherStatus'},],
      }
    },
  ],
}

import React, { useEffect } from 'react';
import { withDocument } from 'part:@sanity/form-builder';
import { Checkbox } from '@sanity/ui';
import PatchEvent, { set, unset } from '@sanity/form-builder/PatchEvent';
import { useState } from 'react';
import styles from '../../brandStyling/styles/styles.css';

const StatusNotification = React.forwardRef((props, ref) => {
  const {
    value, // Current field value
    onChange, // Method to handle patch events
    type,
  } = props;

  // The status dropdown that determines display options
  const hotelStatusType = props.document.management.hotelStatusType;

  // Set the conditions where each display option checkbox will be true or not
  let hotelInGuide, hotelShortlist;
  if (
    hotelStatusType === 'old' ||
    hotelStatusType === 'New'
  ) {
    hotelInGuide = true;
  }
  let hotelOmitted = hotelStatusType === 'Omitted' ? true : false;

  // Hooks
  const [inputReadOnly, setInputReadOnly] = useState(false);

  // Functions
  const truePatchEvent = () => {
    onChange(PatchEvent.from('true' ? set(true) : set(false)));
    setInputReadOnly(true);
  };
  const falsePatchEvent = () => {
    onChange(PatchEvent.from('false' ? set(false) : set(true)));
    setInputReadOnly(true);
  };

  /** On page load & anytime the hotel status dropdown is changed we need to
   * update display option checkboxes
   * set to readOnly if applicable
   */
  useEffect(() => {
    console.log('title:', type.title, 'statusType:', hotelStatusType);
    // Check to see what checkbox is current
    // In Guide Checkbox
    if (type.title === 'In Guide') {
      if (hotelInGuide) {
        console.log('in guide');
        truePatchEvent();
      } else if (hotelOmitted) {
        console.log('in guide gets unchecked - omitted!');
        // uncheck in guide as the hotel is omitted
        falsePatchEvent();
      } else {
        console.log('not in guide');
        setInputReadOnly(false);
      }
    }

    // Omitted Checkbox - should always be readonly?
    if (type.title === 'Omitted') {
      if (hotelOmitted) {
        console.log('omitted');
        truePatchEvent();
      } else {
        console.log('not omitted');
        falsePatchEvent();
      }
    }
  }, [hotelStatusType]);

  // Creates a change handler for patching data - this visualises whether the checkbox is 'checked' or not
  const handleChange = React.useCallback(
    // useCallback will help with performance
    (event) => {
      console.log('event', event.target.checked, event.target);
      const inputValue = event.target.checked; // get current value
      onChange(PatchEvent.from(inputValue ? set(true) : set(false)));
    },
    [onChange]
  );

  return (
    <div>
      <label className={inputReadOnly ? styles.labelReadOnly : styles.label}>
        <Checkbox
          checked={value}
          onChange={handleChange}
          readOnly={inputReadOnly}
        />
        <span className={styles.checkboxText}>{type.title}</span>
      </label>
    </div>
  );
});

export default withDocument(StatusNotification);