change props children in input

Parts/Input.tsx

@@ -5,11 +5,11 @@ import { useField as useFormikField, useFormikContext, FieldHookConfig } from "f
 //const useFormikField = null;
 //const useFormikContext = ()=>{};
 
-export function useField(props){
+export function useField(props) {
   let getField = useFormikField;
   const context = useFormikContext();
-  if(!context){
-    getField = (propsOrFieldName: FieldHookConfig<any>)=>{
+  if (!context) {
+    getField = (propsOrFieldName: FieldHookConfig<any>) => {
       return [props, null, null];
     }
   }
@@ -25,8 +25,9 @@ export default function Input(
   }
 ) {
   /*name, id*/
+  let { children, ...otherProps } = props;
 
-  const [field, meta, helpers] = useField(props);
+  const [field, meta, helpers] = useField(otherProps);
 
   return (
     <div css={[props.title && tw`my-1`, tw`relative`]} className={props.className}>
@@ -43,7 +44,7 @@ export default function Input(
       {/*name={name || title} id={id || name || title}*/}
       <input
         id={props.id ?? props.name ?? props.title}
-        {...props}
+        {...otherProps}
         {...field}
         tw="bg-primary appearance-none border-2 border-secondary rounded w-full py-2 px-4 text-primary leading-tight focus:outline-none focus:bg-secondary focus:border-accent transition duration-150 "
       />
@@ -69,7 +70,7 @@ export function TextArea({
         <label
           {...label}
           css={[tw`block text-secondary text-sm font-bold mb-2`, label?.css]}
-          
+
         >
           {title}
         </label>
@@ -100,12 +101,12 @@ export function TextArea({
 export function CheckBox({
   label,
   title,
-  
+
   children,
   ...props
 }) {
 
-  const [field, meta, helpers] = useField(props); 
+  const [field, meta, helpers] = useField(props);
 
   return (
     <div tw="my-1 flex text-secondary">