custom endpoint for create page

import React from "react";
import { Box, TextField } from "@mui/material";
import { IResourceComponentsProps, useParsed, useShow } from "@refinedev/core";
import { Create } from "@refinedev/mui";
import { useForm } from "@refinedev/react-hook-form";

interface UserFormValues {
  _id: string;
  username: string;
  email: string;
  phone_number: string;
  roles: string[];
  profile: string;
  address: string;
  postcode: string;
  country: string;
}

export const UserCreate: React.FC<IResourceComponentsProps> = () => {
  const {
    saveButtonProps,
    refineCore: { formLoading },
    register,
    formState: { errors },
  } = useForm<UserFormValues>({});

  return (
    <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
      <Box
        component="form"
        sx={{ display: "flex", flexDirection: "column" }}
        autoComplete="off"
      >
        <TextField
          {...register("_id", {
            required: "This field is required",
          })}
          error={!!errors._id}
          margin="normal"
          fullWidth
          InputLabelProps={{ shrink: true }}
          type="text"
          label={"User ID"}
          name="_id"
        />
      {/* moreform fields */}

        
      </Box>
    </Create>
  );
};

import React from "react";
import { Box, TextField } from "@mui/material";
import { IResourceComponentsProps, useParsed, useShow } from "@refinedev/core";
import { Create } from "@refinedev/mui";
import { useForm } from "@refinedev/react-hook-form";

interface UserFormValues {
  _id: string;
  username: string;
  email: string;
  phone_number: string;
  roles: string[];
  profile: string;
  address: string;
  postcode: string;
  country: string;
}

export const UserCreate: React.FC<IResourceComponentsProps> = () => {
  const {
    saveButtonProps,
    refineCore: { formLoading },
    register,
    formState: { errors },
  } = useForm<UserFormValues>({});

  return (
    <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
      <Box
        component="form"
        sx={{ display: "flex", flexDirection: "column" }}
        autoComplete="off"
      >
        <TextField
          {...register("_id", {
            required: "This field is required",
          })}
          error={!!errors._id}
          margin="normal"
          fullWidth
          InputLabelProps={{ shrink: true }}
          type="text"
          label={"User ID"}
          name="_id"
        />
      {/* moreform fields */}

        
      </Box>
    </Create>
  );
};