Is there any way to use zod and custom input and pass validation as props to child element

Question

As I have created a child input tag element component to receive zod validations I am looking for any possibility to achieve that

Child component

import { forwardRef } from "react";

interface EditTextProps {
    type?: string;
    leadingIcon?: React.ReactNode;
    trailingIcon?: React.ReactNode;
    placeholderText: string;
    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
    trailingIconAction?: () => void;
    width?:string,
    name:string
}
const EditText: React.FC<EditTextProps> = forwardRef(({
    type="text",
    leadingIcon,
    trailingIcon,
    placeholderText,
    trailingIconAction,
    width,
    name
}, ref) => {
return (<input
                  ref={ref}
                    type={type}
                    name={name}
                    placeholder={placeholderText}
                    className={inputStyle}
    
                />) } 
export default EditText;

Parent component

const Home = () {
return <EditText placeholderText={"Email"}  {...register("email", {required:true})} />
}

Actual result

whether I add or not add anything I get this message on my webpage Email is required