The value I selected in FormSelect does not appear

Question

My code is like this.I wanted to create a generic FormSelect structure.

import axios from "axios"
import classnames from "classnames"
import { useEffect, useState } from "react"
import Select from "react-select"
import { Label } from "reactstrap"
import { selectThemeColors } from "../../../utility/Utils"

const FormSelect = ({
  title,
  name,
  options,
  value,
  setFieldValue,
  isRequired,
  onChange,
  errors,
  isMulti,
  link,
  isDisabled,
  menuPlacement
}) => {
  const [selectedOption, setSelectedOption] = useState()
  const [selectableOptions, setSelectableOptions] = useState()

  const setOption = (name, option) => {
    if (option) {
      if (!isMulti) {
        setSelectedOption(option)
        if (setFieldValue) setFieldValue(name, option.value)
      } else {
        setSelectedOption([...option])
        const selectedOptions = []
        option.map((o) => {
          selectedOptions.push(o.value)
        })
        setFieldValue(name, selectedOptions)
      }
    } else {
      setSelectedOption(null)
      setFieldValue(name, null)

    }

  }

  useEffect(() => {

    if (link) {
      axios
        .get(link)
        .then((response) => {
          setSelectableOptions(response.data)
        })
    } else if (options) {
      setSelectableOptions(options)
    }
  }, [])

  useEffect(() => {
    if (options && options.length > 0 && value) {

      if (isMulti) {
        const selectedOptions = []
        value.map((v) => {
          const selected = options.find(x => `${x.value}` === `${v}`)
          selectedOptions.push(selected)
        })
        setSelectedOption(selectedOptions)

      } else {
        const selectedOption = options.find(x => `${x.value}` === `${value}`)
        setSelectedOption(selectedOption)
      }
    }
  }, [value, options])

  return (
    <div className="mb-1 w-100">
      <Label className="form-label" for="parent-class">
        {title}
        {isRequired && <span className="text-danger">*</span>}
      </Label>
      <Select
        id="parent-class"
        isDisabled={isDisabled}
        isMulti={isMulti}
        className={classnames('react-select', { 'is-invalid': errors && errors[name] })}
        classNamePrefix="select"
        isClearable
        placeholder={title}
        options={options ? options : selectableOptions}
        theme={selectThemeColors}
        value={selectedOption}
        menuPlacement={menuPlacement ? menuPlacement : 'auto'}
        isOptionDisabled={(option) => option.isDisable}
        onChange={(e) => {
          console.log(e);
          if (onChange !== undefined) {
            onChange(e)
          }
          if (setFieldValue !== undefined) {
            setOption(name, e)
          }
        }}
      />
      {errors && errors[name] && <div className={classnames({
        "invalid-feedback": errors[name]
      })}>*{errors[name]}</div>}

    </div>
  )
}
export default FormSelect

I use FormSelect in the code below, but the City value I selected does not appear. I use formic. What should I do for this? What am I doing wrong.

const cities = [
    {value: 'istanbul', label: 'Istanbul'},
    {value: 'ankara', label: 'Ankara'},
    // ... other cities
  ]

return (
    <Formik
      initialValues={{
        selectedCity: '',
      }}
      validationSchema={validationSchema}
      onSubmit={(values) => {
        console.log(values)
        submitForm(values)
      }}
      validateOnChange={false}
    >
      {({values,handleSubmit, handleChange, }) => (
        <div className='card mb-5 mb-xl-10'>
          <div className='card-body'>
              <div className='address-selection-form'>
                <ModalBody className='flex-grow-1'>
                  <Form onSubmit={handleSubmit}>
                    {/* <h2>Adres Seçimi</h2> */}

                      <span>Şehir</span>
                      <FormSelect
                      title='Şehir'
                      name='city'
                      options={cities}
                      value={values.selectedCity}
                      onChange={(selectedOption) => handleChange('selectedCity', selectedOption)}
                    />
                      <br />
                    <Button className='me-1' color='success' onClick={() => submitForm(values)}>
                      Devam Et
                    </Button>
                  </Form>
                </ModalBody>
              </div>
          </div>
        </div>
      )}
    </Formik>
  )

When I select data from FormSelect and print it to the console, no data is filled in it. When I do the same thing with normal Select, data comes into it.