I’m trying to pass data from child component to parent one through change event ; but i can’t understand basically both functions have the same structure. The main components is getting bigger I’m trying to break down it some smaller components

parent component:

  const handleChange =
    (name: string) => (event: FormEvent<HTMLInputElement | HTMLSelectElement  > ) => {
      const target = event?.target as HTMLInputElement 
      let file: File;
      let value;
      if (target.files as FileList) {
        file = (target.files as FileList)[0];
        value = name === "photo" ? file : event?.currentTarget.value;
        if (name === "photo") {
          formData.append("photo", file);
          setImage(URL.createObjectURL(file));
        }
      } else {
        value = event?.currentTarget.value;
        formData.set(name, value);
        setValues({ ...values, [name as string]: value });
      }
    };
  return (
 <RenderCategories handleChange={handleChange('category')} />
)

child components:

interface FuncProps{
    handleChange:(name:string)=>(event:FormEvent<HTMLInputElement | HTMLSelectElement>)=>void
}
const RenderCategories = (props:FuncProps) => {
    const [categories,setCategories]=useState([])

    const loadCategories= ()=>{
        getCategories().then((data)=>{
            if(data.error){
                console.log(data.error)
            }else{
                setCategories(data)
            }
        })
    }

    useEffect(()=>{
        loadCategories()
    },[])
    return (
        <div className="col-12 col-md-6 ">
           
             <label htmlFor="categorySelect" className="form-label required " >
                  Category
                </label>
                <select
                  className="form-control form-select "
                  onChange={props.handleChange("category")}
                
                >
                 <option>Select one</option>
                  {categories &&
                    categories?.map((c: any, i: any) => {
                    return  <option key={i} value={c._id}>
                        {c.name}
                      </option>
})}
                </select>
             
            </div> 
      );

i tried various ways but couldn’t get rid of this error
Type '(event: FormEvent<HTMLInputElement | HTMLSelectElement>) => void' is not assignable to type '(name: string) => (event: FormEvent<HTMLInputElement | HTMLSelectElement>) => void'. Types of parameters 'event' and 'name' are incompatible. Type 'string' is not assignable to type 'FormEvent<HTMLInputElement | HTMLSelectElement>'