Adding functionality to UX form elements in React

I'm using React for a project that requires me to make a submission form. I've used Formik to create one that logs the inputs but now I've added some UI elements (namely a range slider and a date picker) I can't seem to link them up with the rest of the form.

I've tried playing around with the onChange on both but just can't seem to log the inputs. Any help would be really appreciated.

My form looks like this:

import './App.css';
import {Routes, Route, Link} from 'react-router-dom';
import BootstrapDatePickerComponent from './datepicker'
import React, { Component, useState } from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'react-bootstrap-range-slider/dist/react-bootstrap-range-slider.css';
import {Form, Row, Col, Button, FormControl, InputGroup, Nav, Navbar, Container, Card, ListGroup, NavDropdown, Offcanvas, Text} from 'react-bootstrap/'
import 'react-bootstrap-range-slider/dist/react-bootstrap-range-slider.css';
import Score from './slider';
import Archive from './Database'
import { Formik } from 'formik';
import { useFormik } from 'formik';
import RangeSlider from 'react-bootstrap-range-slider';


function Submit () {


  const [ value, setValue ] = React.useState(25);
  const formik = useFormik({
    initialValues: {
      Username: '',
      Address: '',
      Postcode: '',
      Details: '',
      Date:'',
      Score: '',
    },
    onSubmit: values => {
      alert(JSON.stringify(values, null, 2));
    },
  });

  return (
    <Form onSubmit={formik.handleSubmit} className="submit-form">
      <Form.Group className="mb-3">

        <InputGroup className="mb-3">
        <InputGroup.Text id="Username" name="username" type="text" onChange={formik.handleChange}value={formik.values.Username}>Username</InputGroup.Text>
        <FormControl
        aria-label="Default"
        aria-describedby="inputGroup-sizing-default"
        id="Username"
        name="Username"
        type="text"
        onChange={formik.handleChange}
        value={formik.values.Username}
        />
        </InputGroup>
        <InputGroup className="mb-3">
        <InputGroup.Text id="Address" name="Address" type="text" onChange={formik.handleChange}value={formik.values.Username}>Address</InputGroup.Text>
        <FormControl
        aria-label="Default"
        aria-describedby="inputGroup-sizing-default"
        Placeholder="Please enter the house/flat number and street name..."
        id="Address"
        name="Address"
        type="text"
        onChange={formik.handleChange}
        value={formik.values.Address}
        />
        </InputGroup>
        <InputGroup className="mb-3">
        <InputGroup.Text id="Address" name="Postcode" type="text" onChange={formik.handleChange} value={formik.values.Address}>Postcode</InputGroup.Text>
        <FormControl
        aria-label="Default"
        aria-describedby="inputGroup-sizing-default"
        Placeholder="Please enter the postcode..."
        id="Postcode"
        name="Postcode"
        type="text"
        onChange={formik.handleChange}
        value={formik.values.Postcode}
        />
        </InputGroup>
      </Form.Group>
      <InputGroup>
      <InputGroup.Text>Details</InputGroup.Text>
      <FormControl
      as="textarea"
      aria-label="Details"
      placeholder="Tell us about your issue..."
      id="Details"
      name="Details"
      type="text"
      onChange={formik.handleChange}
      value={formik.values.Details}
      />
      </InputGroup>
      <div className="DatePicker">
        <BootstrapDatePickerComponent />
      </div>
      <Form.Label>How would you rank your overall experience in this property?</Form.Label>
      <div className="Score">
      <Form.Group as={Row}>
        <Col xs="9">
          <RangeSlider
            value={value}
            onChange={e => setValue(e.target.value)} 
          />
        </Col>
        <Col xs="3">
          <Form.Control
          aria-label="Default"
          value={value}
          id="Score"
          name="Details"
          type="number"
          onChange={formik.handleChange}/>
        </Col>
      </Form.Group>
      </div>
      <Button variant="primary" type="submit">
        Submit
      </Button>
    </Form>
  )


  }

export default Submit;

And my UI components look like this:

Rangeslider:

import React, { useState } from 'react';
import './App.css';
import {Form, Row, Col, Button, FormControl, InputGroup, Nav, Navbar, Container, Card, ListGroup, NavDropdown, Offcanvas} from 'react-bootstrap/'
import RangeSlider from 'react-bootstrap-range-slider';
import 'react-bootstrap-range-slider/dist/react-bootstrap-range-slider.css';
import {Formik, useFormik} from 'formik'


const Score = () => {

  const [ value, setValue ] = React.useState(25);
  const formik = useFormik({
    initialValues: {
      Username: '',
      Address: '',
      Postcode: '',
      Details: '',
      Date:'',
      Score: '',
    },
    onSubmit: values => {
      alert(JSON.stringify(values, null, 2));
    },
  });
  return (
    <Form htmlFor="Score">
      <Form.Group as={Row}>
        <Col xs="9">
          <RangeSlider
            value={value}
            onChange={e => setValue(e.target.value)}
          />
        </Col>
        <Col xs="3">
          <Form.Control
          aria-label="Default"
          value={value}
          id="Score"
          name="Details"
          type="number"
          onChange={formik.handleChange}/>
        </Col>
      </Form.Group>
    </Form>
  );
}


export default Score;

Date picker:

import React, { Component } from 'react';
import DatePicker from 'react-datepicker';
import "react-datepicker/dist/react-datepicker.css";
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      startDate: new Date()
    };
    this.handleChange = this.handleChange.bind(this);
    this.onFormSubmit = this.onFormSubmit.bind(this);
  }
  handleChange(date) {
    this.setState({
      startDate: date
    })
  }
  onFormSubmit(e) {
    e.preventDefault();
    console.log(this.state.startDate)
  }

  render() {
    return (
      <form onSubmit={ this.onFormSubmit }>
        <div className="form-group">
          <DatePicker
              selected={ this.state.startDate }
              onChange={ this.handleChange }
              name="startDate"
              dateFormat="MM/dd/yyyy"
          />
        </div>
      </form>
    );
  }

}
export default App;