override formik.onChange with custom onChange method in reactjs

I'm trying to get the value of a file input so that I can make a custom file input. But when I try to pass the value using onChange prop the value is not passing to the handleChange function I'm calling. I'm also using formik and Yup for form validation and I think when I call onChange prop its invoking the formik.onChange instead of the custom handleChange function that I wrote. So my question is how do I add my custom function to formik.onChange function. I also tried to put handleChange function with in useFormik, but didnt work. Here is my code below.

    import React, { useState } from "react";
  
    
    import { Button, Card, Form, Modal, Row, Col } from "react-bootstrap";
    
    import { useFormik } from "formik";
    import * as Yup from "yup";
    
    import "../assets/css/uploadContent.css";
    

    
    let validationSchema = Yup.object().shape({
      inputFile: Yup.mixed().required("Required"),
      
      contentTitle: Yup.string().required("Content title is required"),
    
      medias: Yup.string().required("Required"),
   
      description: Yup.string().required("Required"),
    
      thumbnail: Yup.mixed()
        .required("Required"),
    });
    
    function UploadContents({ handleUpload }) {
      const [selectedFile, setSelectedFile] = useState(null);
     
    
      console.log("Files", selectedFile);
    
      const handleChange = (e) => {
    setSelectedFile(e.target.files[0]);
    console.log("Files selected are", selectedFile);
  };
    
      const formik = useFormik({
        initialValues: {
          inputFile: "",
          contentTitle: "",
        },
    
        validationSchema: validationSchema,
    
   // handleChange: (e) => {
    //   setSelectedFile(e.target.files[0]);
    //   console.log("This is the formik onchange", selectedFile);
    // },
        onSubmit: (values) => {
          console.log("Values are", values);
        },
      });
    
      return (
        <div>  
            <Form onSubmit={formik.handleSubmit}>
               <Card className="w-100 p-5 text-center file-card">
              <Form.File id="formcheck-api-regular" custom>
              <Form.File.Input
                  type="file"
                  name="inputFile"
                  onChange={formik.handleChange}
                  {...formik.getFieldProps("inputFile")}
                />
              <Form.Label id="file-label">
                <i className="fa fa-cloud-upload" />
                Upload Contents
              </Form.Label>
              {selectedFile && selectedFile ? (
                <div className="file-preview">{selectedFile}</div>
              ) : null}
              </Form.File>
              <div className="errors">
                {formik.touched.inputFile && formik.errors.inputFile ? (
                  <div>{formik.errors.inputFile}</div>
                ) : null}
              </div>
            </Card>
    
                <Form.Group className="mt-2">
                  <Form.Control
                    size="md"
                    type="text"
                    id="formGroupExampleInput"
                    placeholder="Enter content title"
                    name="contentTitle"
                    {...formik.getFieldProps("contentTitle")}
                  />
                  <div className="errors">
                    {formik.touched.contentTitle && formik.errors.contentTitle ? (
                      <div>{formik.errors.contentTitle}</div>
                    ) : null}
                  </div>
                </Form.Group>            
            </Form>
        </div>
      );
    }
    
    export default UploadContents;