How to Show Image Size in the Studio

export default {
  name: 'figure',
  title: 'Image',
  type: 'image',
  fields: [
    {
      name: 'size',
      title: 'Size',
      type: 'string',
      inputComponent: ImageSize,
      options: {
        isHighlighted: true,
      },
    },
//other fields

//ImageSize.js
import React, { useState, useEffect } from 'react';
import { studioClient } from '../../lib/utils/studioClient';

const ImageSize = ({ parentValue }) => {
  const [imageSize, setImageSize] = useState();

  useEffect(() => {
    const getImage = async () =>
      await studioClient
        .fetch(`*[_id == $id][0].metadata.dimensions{ height, width }`, {
          id: parentValue.asset._ref,
        })
        .then(setImageSize);
    getImage();
  }, [parentValue]);

  return (
    <p>
      Size: {imageSize?.width}px x {imageSize?.height}px
    </p>
  );
};

export default ImageSize;