[QUESTION] Adding floating labels to Creatable Select about chakra-react-select HOT 4 CLOSED

import { extendTheme } from "@chakra-ui/react"

const activeLabelStyles = {
    transform: 'scale(0.85) translateY(-24px)',
}

export const theme = extendTheme({
    components: {
        Form: {
            variants: {
                floating: {
                    container: {
                        _focusWithin: {
                            label: {
                                ...activeLabelStyles,
                            },
                        },
                        'input:not(:placeholder-shown) + label, .chakra-select__wrapper + label, .react-date-picker + label':
                        {
                            ...activeLabelStyles,
                        },
                        label: {
                            top: 0,
                            left: 0,
                            zIndex: 2,
                            position: 'absolute',
                            backgroundColor: 'white',
                            pointerEvents: 'none',
                            mx: 3,
                            px: 1,
                            my: 2,
                            transformOrigin: 'left top'
                        },
                    },
                },
            },
        },
    },
})

<Box>
    <FormControl id="street" variant='floating' isRequired>
        <Input placeholder=' ' type="text" style={inputStyle} {...register("street")} />
        <FormLabel>Street</FormLabel>
    </FormControl>
</Box>

import { useState } from "react";
import { FormControl, FormLabel } from "@chakra-ui/react";
import { CreatableSelect } from "chakra-react-select";

const Example = () => {
  const [place, setPlace] = useState();

  const labelProps = {
    ...(!!place && { transform: "scale(0.85) translateY(-24px)" })
  };

  return (
    <FormControl id="place" isRequired variant="floating">
      <FormLabel {...labelProps}>Place</FormLabel>
      <CreatableSelect
        name="place"
        className="chakra-react-select__wrapper"
        classNamePrefix="chakra-react-select"
        options={locality}
        closeMenuOnSelect={true}
        value={place}
        tabSelectsValues
        onChange={setPlace}
        openMenuOnFocus
        placeholder=" "
      />
    </FormControl>
  );
};

import { useState } from "react";
import { FormControl, FormLabel } from "@chakra-ui/react";
import { CreatableSelect } from "chakra-react-select";

const Example = () => {
  const [place, setPlace] = useState();

  return (
    <FormControl id="place" isRequired variant="floating" mb={8}>
      <CreatableSelect
        name="place"
        classNamePrefix="chakra-react-select"
        // ^ THIS IS REQUIRED, but it can be whatever you want.
        // Just make sure its consistent with your custom selector and across
        // all select components that you want to have a floating label
        options={locality}
        value={place}
        tabSelectsValues
        onChange={setPlace}
        openMenuOnFocus
        placeholder=" "
        chakraStyles={{
          menu: (provided) => ({
            ...provided,
            zIndex: 3
          })
        }}
      />
      <FormLabel>Place</FormLabel>
    </FormControl>
  );
};