Customizing an image field in a Next.js app with live preview mode

const ImageWithColorSwatches = props => {
  const { value, renderDefault, onChange } = props;
  const image = useFormValue(["image"])?.asset?._ref;

  const colors = usePageColors({
    swatchName: value?.colorPalette ?? "vibrant",
    image
  });

  // When colors change, patch the document
  // (these changes aren't streaming to Next.js via `next-sanity` live preview)

  useEffect(() => {
    if (colors && value && colorsAreDifferent(colors, value.pageColors)) {
      const nextValue = { ...value, pageColors: colors };
      onChange(nextValue ? set(nextValue) : unset());
    }
  }, [colors, onChange, value]);

  return (
    <Inline>
      {renderDefault(props)}
      {colors ? (
        <div>
          <ColorSwatch color={colors.primary} />
          <ColorSwatch color={colors.secondary} />
        </div>
      ) : null}
    </Inline>
  );
};

export default defineConfig({
  ...
  form: {
    components: {
      input: props =>
        ["Main image"].includes(props.schemaType?.title) ? (
          <ImageWithColorSwatches {...props} />
        ) : (
          props.renderDefault(props)
        )
    }
  }
});

return (
  <Layout>
    {pageStyles ? <style jsx global>{pageStyles}</style> : null}
    {/* ...etc... */}
  </Layout>
);