fix: use FC over JSX to support React 18

Author: angeloashmore

src/PrismicNextImage.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { JSX } from "react";
+import { FC } from "react";
 import Image, { ImageProps } from "next/image";
 import { buildURL, ImgixURLParams } from "imgix-url-builder";
 import { ImageFieldImage, isFilled } from "@prismicio/client";
@@ -80,7 +80,7 @@ export type PrismicNextImageProps = Omit<
  *
  * @see To learn more about `next/image`, see: https://nextjs.org/docs/api-reference/next/image
  */
-export const PrismicNextImage = ({
+export const PrismicNextImage: FC<PrismicNextImageProps> = ({
 	field,
 	imgixParams = {},
 	alt,
@@ -91,7 +91,7 @@ export const PrismicNextImage = ({
 	fallback = null,
 	loader = imgixLoader,
 	...restProps
-}: PrismicNextImageProps): JSX.Element => {
+}) => {
 	if (DEV) {
 		if (typeof alt === "string" && alt !== "") {
 			console.warn(

src/PrismicPreview.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode, JSX } from "react";
+import type { FC, ReactNode } from "react";
 import Script from "next/script";
 import { getToolbarSrc } from "@prismicio/client";
 
@@ -37,9 +37,7 @@ export type PrismicPreviewProps = {
  * This component can be wrapped around your app or added anywhere in your app's
  * tree. It must be rendered on every page.
  */
-export async function PrismicPreview(
-	props: PrismicPreviewProps,
-): Promise<JSX.Element> {
+export const PrismicPreview: FC<PrismicPreviewProps> = async (props) => {
 	const { repositoryName, children, ...otherProps } = props;
 
 	// Need this to avoid the following Next.js build-time error:
@@ -61,4 +59,4 @@ export async function PrismicPreview(
 			<Script src={toolbarSrc} strategy="lazyOnload" />
 		</>
 	);
-}
+};

src/PrismicPreviewClient.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect } from "react";
+import { FC, useEffect } from "react";
 import { cookie as prismicCookie } from "@prismicio/client";
 import { useRouter } from "next/navigation";
 
@@ -11,7 +11,7 @@ type PrismicPreviewClientProps = {
 	exitPreviewURL?: string;
 };
 
-export function PrismicPreviewClient(props: PrismicPreviewClientProps): null {
+export const PrismicPreviewClient: FC<PrismicPreviewClientProps> = (props) => {
 	const {
 		repositoryName,
 		isDraftMode,
@@ -97,7 +97,7 @@ export function PrismicPreviewClient(props: PrismicPreviewClientProps): null {
 	}, [repositoryName, isDraftMode, updatePreviewURL, exitPreviewURL, refresh]);
 
 	return null;
-}
+};
 
 /**
  * Returns the value of a cookie from a given cookie store.

src/pages/PrismicPreview.tsx

@@ -1,4 +1,4 @@
-import { type ReactNode, useEffect, JSX } from "react";
+import { type ReactNode, useEffect, FC } from "react";
 import { useRouter } from "next/router";
 import Script from "next/script";
 import { getToolbarSrc, cookie as prismicCookie } from "@prismicio/client";
@@ -36,7 +36,7 @@ export type PrismicPreviewProps = {
  * This component can be wrapped around your app or added anywhere in your app's
  * tree. It must be rendered on every page.
  */
-export function PrismicPreview(props: PrismicPreviewProps): JSX.Element {
+export const PrismicPreview: FC<PrismicPreviewProps> = (props) => {
 	const {
 		repositoryName,
 		updatePreviewURL = "/api/preview",
@@ -132,7 +132,7 @@ export function PrismicPreview(props: PrismicPreviewProps): JSX.Element {
 			<Script src={toolbarSrc} strategy="lazyOnload" />
 		</>
 	);
-}
+};
 
 function getPreviewCookieRepositoryName() {
 	const cookie = window.document.cookie