Conditionally show a field based off of a value inside of a reference

import { ConditionalComponent } from './path/to/component'
 
//...

{
  name: 'reference',
  type: 'reference',
  to: [{ type: 'referenceDocument' }],
},
{
  name: 'sibling',
  type: 'string',
  components: {
    field: ConditionalComponent,
  },
},

import { useEffect, useState } from 'react';
import { useClient, useFormValue } from 'sanity';

const ConditionalComponent = props => {
  const [hideSibling, setHideSibling] = useState(false);
  const { renderDefault } = props;
  const client = useClient({ apiVersion: '2023-04-01' });
  const reference = useFormValue(['reference'])._ref;

  useEffect(() => {
    if (!reference) return;
    client
      .fetch(`*[_id == $reference].hideSibling`, { reference })
      .then(setHideSibling);
  }, [client, reference]);

  return hideSibling ? null : renderDefault(props);
};