How to receive props data in react-select's custom component?

I created a custom component in react-select to customize the control field for me to place a custom label with animation, and I can't figure out where to place or receive that prop.

import React from "react";
import { components, ControlProps, GroupBase, Props } from "react-select";
import ReactSelectAsync, { AsyncProps } from "react-select/async";

type TCustomAsyncSelect = (
  props: Props &
    Pick<
      AsyncProps<unknown, boolean, GroupBase<unknown>>,
      "defaultOptions" | "cacheOptions" | "loadOptions" | "isLoading"
    >
) => JSX.Element;

const Control:
  | React.ComponentType<ControlProps<unknown, boolean, GroupBase<unknown>>>
  | undefined = (props) => (
  <div style={{ backgroundColor: "pink", padding: "10px 20px" }}>
    <p>dynamic label title here</p>
    <components.Control {...props} />
  </div>
);

const CustomAsyncSelect: TCustomAsyncSelect = (props) => (
  <ReactSelectAsync {...props} components={{ Control }} />
);

export default CustomAsyncSelect;

I tried placing the custom control component inside my CustomAsyncSelect component, so that I can easily receive the label prop from my CustomAsyncSelect, but it seems there's an issue during render, it loses focus on every keystroke.

Here's my codesandbox for you to play around.