Untitled

const PersonalForm = () => {
    const { control } = useFormContext();
    return (
      <>
        <Controller
          control={control}
          name="reason"
          render={({ field }) => (
            <TextField
            id="reason"
            label="Reason to join PASC"
            variant="outlined"
            placeholder="Why do you want to join PASC?"
            fullWidth
            margin="normal"
            multiLine="true"
            rows={2}
              {...field}
            />
          )}
        />
        <Controller
          control={control}
          name="expectation"
          render={({ field }) => (
            <TextField
            required
            id="expectation"
            label="Expectations from PASC"
            variant="outlined"
            placeholder="Your expectations from PASC?"
            fullWidth
            margin="normal"
            multiLine="true"
            rows={2}
              {...field}
            />
          )}
        />
        <Grid container justify="center">
            <Grid item xs={6}>
              <div>Scan QR code</div>
            </Grid>
            <Grid item xs={4}>
              <ImageList sx={{ width: 200, height: 200 }} cols={1} rowHeight={200}>
                {itemData.map((item) => (
                  <ImageListItem key={item.img}>
                    <img
                      src={`${item.img}?w=200&h=200&fit=crop&auto=format`}
                      srcSet={`${item.img}?w=200&h=200&fit=crop&auto=format&dpr=2 2x`}
                      alt={item.title}
                      loading="lazy"
                    />
                  </ImageListItem>
                ))}
              </ImageList>
            </Grid>
          </Grid>
          <div>Upload Payment Screenshot</div>
          <Button
            variant="contained"
            component="label"
            color="primary"
          >
            Upload
            <input
              type="file"
              hidden
            />
          </Button>
          <Controller
          control={control}
          name="transactionid"
          render={({ field }) => (
            <TextField
              id="transactionId"
              label="Transaction Id"
              variant="outlined"
              placeholder="Enter Your Transaction Id"
              fullWidth
              margin="normal"
              {...field}
            />
          )}
        />
      </>
    );
  };