react choices blinks and disappears when performing an event like formik's submit

[joan3423]

When I click my button to save the form all the selectors blink and it's as if they disappeared for a few seconds I have no idea why it happens

Does anyone have an idea why it happens?

this is the code

export default function ChoicesComponent(props) {

  const inputRef = useRef(false)

  const showSelectedOptions = () => {
    const selected = [...inputRef.current.options]
      .filter(option => option.selected)
      .map(option => option.value);
    const result = selected.map((item) => {
      const parts = item.split(" - ", 2);
      let currentItem = parts[0]
      return { [props.options.childName]: currentItem }
    })
    props.values[props.name] = result
  }

  useEffect(() => {
    const select = new Choices(inputRef.current, {
      choices: props.options.datas,
      addItemFilter: false,
      classNames: {
        containerInner: "p-3 choices__inner bg-white",
        list: "p-0",
      },
      removeItems: true,
      removeItemButton: true,
      searchPlaceholderValue: "Search",
      itemSelectText: "Select",
      noResultsText: "No se encontró",
    })
    if (!props.multiple) {
      select.setChoiceByValue(props.values[props.name])
    } else {
      select.setChoiceByValue(props.values[props.name].map(option => option[props.options.childName]))
    }
  }, [])

  return (
    <div className="position-relative">
      <select
        name={props.name}
        onChange={(event) => {
          if (props.multiple) {
            showSelectedOptions()
          } else {
            props.handleChange(event);
            props.customChangeFunction && 
            props.customChangeFunction(event.target.value, props.customSentValue);
          }
        }}
        ref={inputRef}
        multiple={props.multiple}
      >
        <option disabled value="">
          {props.defaultText}
        </option>
      </select>
    </div>
  )
}

[TimVerheul]

@joan3423 Did you find a solution to this?