Code that calls component "ProblemReport"

ReportProblem.js

import {ProblemReport} from "@/src/ui-components";
import {API} from "aws-amplify";
import {useRouter} from "next/router";
import {useTheme} from "@aws-amplify/ui-react";


export default function ReportProblem() {
    const router = useRouter();
    const {tokens} = useTheme();

    return (
        <ProblemReport
            overrides={
                {
                    SectionalElement0: {
                        fontSize: tokens.fontSizes.xxxxl,
                        textAlign: 'center',
                        width: "65rem",
                    },
                    Field0: {
                        fontSize: tokens.fontSizes.xxxxl,
                        width: "45rem",
                    },
                    Field1: {
                        fontSize: tokens.fontSizes.xxxxl,
                        width: "45rem",
                    },
                    Field2: {
                        fontSize: tokens.fontSizes.xxxxl,
                        width: "45rem",
                        height: "15rem",
                    },
                    SubmitButton: {
                        fontSize: tokens.fontSizes.xxxxl,
                    },
                    CancelButton: {
                        fontSize: tokens.fontSizes.xxxxl,
                    }
                }
            }
            onSubmit={
                alert('Thank you for your report. We will look into it as soon as possible.')
            }
            onCancel={() => {
                router.back()
            }
            }
        />
    )
}