Unique ID for Sanity Studio's article

Question

Folks. I did the random ID creation plugin but faced some difficulties. I am sharing it here, because somebody can advise me about a fix, and can be very useful for others.

1. First install the dependencies with: npm i nanoid @sanity/ui
2. Creating file: components/IdInput.js
3. Importing into the scheme: import { IdInput } from '../components/IdInput';
4. Adding it into the field type: inputComponent: IdInput

IdInput.js

import React, { useEffect } from 'react';
import { nanoid } from 'nanoid';
import { Box, TextInput } from '@sanity/ui';

const createPatchFrom = (value) => ({
  type: 'set',
  path: [],
  value,
});

export const IdInput = React.forwardRef(function IdInputComponent(props, ref) {
  const { onChange, value } = props;

  useEffect(() => {
    if (!value) {
      onChange(createPatchFrom(nanoid(12)));
    }
  }, [value, onChange]);

  return (
    <Box padding={4}>
      <TextInput
        readOnly
        ref={ref}
        value={value}
      />
    </Box>
  );
});

I am getting an error:

✖ Build Sanity Studio

Error: Parse error @:27:11 at parse$e (file://~/…/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:16327:355) at Object.transform (file://~/…/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:45075:27)