Does not work with astro3 ViewTransitions

In astro3 with ViewTransitions enabled, and the React integrations, this components css is lost every time a viewTransition fires. So whenever you navigate.

https://docs.astro.build/en/guides/view-transitions/

https://docs.astro.build/en/guides/integrations-guide/react/

https://github.com/JedWatson/react-select/assets/73557008/c9b138b2-48ca-4246-bd97-d7c09f75f055

import { useState } from "react";
import { themeColors } from "../../../theme/themeColors";
import Select, { type StylesConfig } from "react-select";

interface DawOption {
  readonly value: string;
  readonly label: string;
  readonly isDisabled?: boolean;
}
export const DawDropDown = () => {
  const colorStyles: StylesConfig<DawOption> = {
    control: (styles) => ({
      ...styles,
      backgroundColor: "white",
      minWidth: "140px",
    }),
    option: (styles, { isDisabled, isFocused, isSelected }) => {
      const bgColor = isSelected
        ? themeColors.accentHilite
        : isFocused
        ? themeColors.darkenedText // on hover
        : undefined;
      if (isDisabled)
        return {
          ...styles,
          backgroundColor: "white",
          color: themeColors.darkenedText,
          cursor: "not-allowed",
        };

      return {
        ...styles,
        backgroundColor: bgColor,
        color: isSelected ? themeColors.text : themeColors.mainBackground,
        cursor: "default",

        ":active": {
          ...styles[":active"],
          backgroundColor: isSelected
            ? themeColors.mainBackground
            : themeColors.text,
        },
      };
    },
    input: (styles) => ({ ...styles }),
    placeholder: (styles) => ({ ...styles }),
    singleValue: (styles, { data }) => ({ ...styles }),
  };

  const [selectedOption, setSelectedOption] = useState<any>(null);
  if (selectedOption) console.log(selectedOption);
  const dawOptions: readonly DawOption[] = [
    {
      value: "Select DAW",
      label: "Select DAW",
      isDisabled: true,
    },
    {
      value: "ProTools",
      label: "ProTools",
    },
    {
      value: "Ableton",
      label: "Ableton",
    },
    {
      value: "Reaper",
      label: "Reaper",
    },
    {
      value: "Logic",
      label: "Logic",
    },
    {
      value: "Cubase",
      label: "Cubase",
    },
    {
      value: "FL Studio",
      label: "FL Studio",
    },
  ];
  return (
    <Select
      defaultValue={dawOptions[0]}
      options={dawOptions}
      onChange={setSelectedOption}
      styles={colorStyles}
    />
  );
};

Start by reproducing the issue with Astro 3, ViewTransitions, and the React integration using the linked Astro guides and example component. Inspect how react-select styles are handled across navigation; done means the component CSS remains present after each view transition.