Tengo dos campos de entrada. Quiero actualizar un campo basado en otro campo y estoy usando Formik. Cuando escribo en el campo de dirección, lo establece en estado de entrada y llama a handleChange y encuentra el código PIN y lo registra. Pero está saliendo mal, ya que se supone que debe cambiar cada vez que escribimos, pero solo establece que lo encuentra para la primera letra. Digamos que para "h" 560102 y aunque escribimos "hosurRoad", el código PIN no cambia. Además, ¿cómo actualizo otro código PIN de campo con este valor?

 export const SignupForm = () => { const classes = useStyles(); const [input, setInput] = useState(""); const recoganizedAreas = { 'hsr':'560102', 'bypanahalli':'676667', 'marathalli':'667776', 'hosurRoad':'321236', 'teachersColony':'560101' }; useEffect(() => { const handleChange = () => { const foundArea = Object.keys(recoganizedAreas).find(key => key.includes(input)) const foundPinCode = recoganizedAreas[foundArea] || "Not found"; console.log(foundPinCode); } },[input]); return ( <Container maxWidth="md"> <div className={classes.formWrapper}> <Formik initialValues={{address:'',pincode:''}} onSubmit={values => { console.log(values); }} > {props => { const { values, handleChange, setFieldValue } = props; return ( <Form> <Grid container spacing={2}> <Grid item xs={12}> <Typography> Your details </Typography> </Grid> <Grid item xs={6}> <Textfield name="address" label="Address" value = {values.address} /> </Grid> <Grid item xs={6}> <Textfield name="pincode" label="Pincode" value={values.pincode} /> {setInput(values.address)} </Grid> <Grid item xs={12}> <Button> Submit Form </Button> </Grid> </Grid> </Form> )}} </Formik> </div> </Container> ); };