How can i make react-bootstrap form components work well with same-named formik components? - reactjs

Question

First, I made a form validated with formik. After that, my team decided we would style with react-bootstrap. This library has a <Form> object, same as Formik. But it is not validating correctly. It either throws input fields as invalid all the time, thus putting its borders red, or as correct all the time.
I suspect it is a matter of combining libraries that work both with forms and have same-named components. I managed to make it work with original bootstrap library. But I still wanted to know why this happens and if it has some solution.
import React, {useState} from 'react';
import '../FormStyles.css';
import * as yup from "yup";
import { Formik, Form, ErrorMessage, Field } from 'formik';
const TestimonialForm = ({ testimonial = null }) => {
const initialValues = {
name: testimonial?.name || "",
description: testimonial?.description || "",
image: testimonial?.image || ""
};
const schema = yup.object().shape({
name: yup.string().min(4, "Name must be at least 4 characters long.").required("You have to provide a name."),
description: yup.string().required("You have to provide a description."),
image: yup.string()
.matches(
/\.(jpg|png)$/,
"We only support .png or .jpg format files."
)
.required("You have to provide an image.")
});
<Formik
initialValues= {initialValues}
validationSchema = {schema}
>
Here's the form with Formik components
{({}) => (
<div>
<Form className="form-container">
<Field
className="input-field"
type="text"
name="name"
placeholder="Testimonial title"/>
<ErrorMessage name="name" />
<Field
className="input-field"
type="file"
name="image"
placeholder="Testimonial image"/>
<ErrorMessage name="image" />
<button className="submit-btn" type="submit">Send</button>
</Form>
</div>
)}
</Formik>
Here's with react-bootstrap components (I only change the import values.) This are the ones that don't validate well.
{({touched, errors}) => (
<div>
<Form className="form-container" onSubmit={onSubmit}>
<Form.Group controlId="name">
<Form.Control
className="input-field"
type="text"
name="name"
isInvalid={name.touched && errors.name}
placeholder="Testimonial title"/>
<Form.Control.Feedback type="invalid">
{errors.name}
</Form.Control.Feedback>
</Form.Group>
<Form.Group controlId="image">
<Form.Control
className="input-field"
type="file"
name="image"
isInvalid={image.touched && errors.image}
/>
<Form.Control.Feedback type="invalid">
{errors.image}
</Form.Control.Feedback>
</Form.Group>
<button className="submit-btn" type="submit">Send</button>
{message && <div>{message}</div>}
</Form>
</div>
)}
</Formik>