chore: adds use client directive atop custom react components

src/fields/MetaDescription.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useCallback } from 'react';
 import { useField, useAllFormFields } from 'payload/components/forms';
 import { useLocale } from 'payload/components/utilities';

src/fields/MetaImage.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useCallback } from 'react';
 import { useLocale, useConfig } from 'payload/components/utilities';
 import { Props as UploadFieldType } from 'payload/dist/admin/components/forms/field-types/Upload/types';

src/fields/MetaTitle.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useCallback } from 'react';
 import { Props as TextFieldType } from 'payload/dist/admin/components/forms/field-types/Text/types';
 import { useLocale } from 'payload/components/utilities';

src/ui/LengthIndicator.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 /* eslint-disable react/require-default-props  */
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable no-use-before-define */

src/ui/Overview.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 // import { Button } from 'payload/components';
 import { useForm, useAllFormFields } from 'payload/components/forms';
 import { Field } from 'payload/dist/admin/components/forms/Form/types';

src/ui/Pill.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 /* eslint-disable no-use-before-define */
 /* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';

src/ui/Preview.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { useAllFormFields } from 'payload/components/forms';
 import React, { useEffect, useState } from 'react';
 import { Field } from 'payload/dist/admin/components/forms/Form/types';