Console doesn't read the input

Using formik and react, I wanted to create a form and I wanted to increase the reusability of my components, so i made a component "TextInput.jsx" that I’m going to use during my whole project. Anyways when i type in the firstname field, the console doesn’t log the changes, I have problems with passing the value props from the ContactForm component(parent Component) to the TextInput component(Child Component). Can anyone help me solve this problem. And thanks.

ContactForm.jsx

import React from "react";
import { useFormik } from "formik";
import TextInput from "../../shared/components/UIElements/TextInput";

const ContactForm = () => {
  const formik = useFormik({
    initialValues: {
      firstName: "",
    },
  });
  console.log(formik);

 return (
    <form onSubmit={formik.handleSubmit}>
      <div className="px-6 w-[700px]">
        <div className="grid grid-cols-1 md:grid-cold-2 gap-8">
          <TextInput
            label="First Name"
            id="firstName"
            value={formik.values.firstName}
            onChange={formik.handleChange}
          >
            First name
          </TextInput>
          <div className="col-span-2 m-auto">
            <button
              className=" btn btn-primary w-32 align-middle"
              type="submit"
              onClick={
                () => console.log(formik)
              }
            >
              Submit
            </button>
          </div>
        </div>
      </div>
    </form>

TextInput.jsx

import React from "react";
const TextInput = (props) => {
  const isRequired = props.required;
  const infoText = props.info;
  return (
    <div>
      <input
        placeholder={props.children}
        className="input input-primary input-bordered"
        id={props.id}
        value={props.value }
        onClick={() => props.onChange()}
      />
    </div>
  );
};

>Solution :

try it!

const TextInput = (props) => {
  const isRequired = props.required;
  const infoText = props.info;
  return (
    <div>
      <input
        placeholder={props.children}
        className="input input-primary input-bordered"
        id={props.id}
        value={props.value }
        onChange={props.onChange} // change this line
      />
    </div>
  );
};