Unable to submit a multi-select checkbox input using formik in react

My form using formik does not currently return a value for the multi-select checkbox input component. I know I need to wrap the check box function component in the formik Field for formik to recognise and grab the component data. However, when ever I do so, It throws an error and the page goes blank.

How best can I integrate this component with formik so I can successfully submit the form.

Checkbox multi-select input compoenet

import React, { useState } from "react";
import { MultiSelect } from "react-multi-select-component";

const options = [
  { label: 'Sunday', value: 'sunday' },
  { label: 'Monday', value: 'monday'},
  { label: 'Tuesday', value: 'tuesday'},
  { label: 'Wednessday', value: 'wednessday'},
  { label: 'Thursday', value: 'thursday'},
  { label: 'Friday', value: 'friday'},
  { label: 'Saturday', value: 'saturday'},
  { label: "Week", value: "week", disabled: true },
];

const SelectFields = ({name}) => {
  const [selected, setSelected] = useState([]);

  return (
    <div>
      {/* <pre>{JSON.stringify(selected)}</pre> */}
      <MultiSelect
        options={options}
        value={selected}
        onChange={setSelected}
        labelledBy="Select"
        name={name}
      />
    </div>
  );
};

export default SelectFields;

Parent component where I'm using formik

import { Formik, Field, Form, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const NewRates = () => {
  
 // code here were removed...

  const initialValues = {
    rateName: '',
    price: '',
    availableForPurchase: '',
    availableType: '',
    accessLevel: false,
    validationType: '',
    durationOfRate: '',
    startTime: '',
    endTime: '',
    startTimeDate: '',
    endTimeDate: '',
  };

  const validationSchema = Yup.object().shape({
  });
  const handleRates = (formValue) => {
       console.log('formValue', formValue)
  };
  
  return (
          <Formik
            initialValues={initialValues}
            validationSchema={validationSchema}
            onSubmit={handleRates}
          >
            <Form>
              {!successful && (
                <FormWrapper>
                      // codes here were removed.
                      <>
                        <h6>Purchase Availability</h6>
                        <FormGroup>
                          <label htmlFor="AvailabilityForPurchase">
                            Select Days as required
                            <SelectFields name='availableForPurchase'/>
                            <ErrorMessage
                              name='availableForPurchase'
                              component='div'
                              className='alert alert-danger'
                            />
                          </label>
                        </FormGroup>

                         ....other codes

I have checked other similar solutions. But none come close to solving my issue.