A select component in a wrapper component does not change its placeholder but value changes

I have a select component that doesn't change it's placeholder when I'm clicking its options. It's wrapped around on another component that serves as the outline of like its title. paragraph and then the select component. I also use it on another select component and it also doesn't work. I am pretty sure it changes it value since I checked the state and also the functionality works excpect the changing of the so called placeholder. This is the original outline which works.

<div className={`flex flex-col col-span-6`}>
        <div className="flex items-center mb-1">
            <h2 className='text-sm'>TYPE OF FLIGHT ANF REGION</h2>
            <FontAwesomeIcon icon={faGlobe} className="text-[#2B8E9B] ml-2" />
        </div>
        <p className='text-xs mb-3'>Choose a type of flight, either DOMESTIC or INTERNATIONAL, and pick which region your coming.</p>
        <div className={`grid grid-cols-2 gap-4`}>
            <FlightTypeComponent flights={domestic} flightLocalType={"domestic"} {...{flightType, locationsFilter, flightTypeClick ,regionSetter}}/>
            <FlightTypeComponent flights={international} flightLocalType={"international"} {...{flightType, locationsFilter, flightTypeClick ,regionSetter}}/>
        </div></div>

This is the current outline which doesn't work:

<TwoComponents title={"TYPE OF FLIGHT ANF REGION"} icon={faGlobe} colSpan={"col-span-6"} childrenCss={"grid-cols-2"} paragraph={"Choose a type of flight, either DOMESTIC or INTERNATIONAL, and pick which region your coming."}>
        <FlightTypeComponent flights={domestic} flightLocalType={"domestic"} {...{flightType, locationsFilter, flightTypeClick ,regionSetter}}/>
        <FlightTypeComponent flights={international} flightLocalType={"international"} {...{flightType, locationsFilter, flightTypeClick ,regionSetter}}/>
      </TwoComponents>

The wrapper in question. I both included both components even if I only showcased the TwoComponents incase of any errors or bad practices.

const EachComponentOutline = () => {
const TwoComponents = ({children, title, paragraph, icon, colSpan, childrenCss}) => {
return (
    <div className={`flex flex-col ${colSpan}`}>
        <div className="flex items-center mb-1">
            <h2 className='text-sm'>{title}</h2>
            <FontAwesomeIcon icon={icon} className="text-[#2B8E9B] ml-2" />
        </div>
        <p className='text-xs mb-3'>{paragraph}</p>
        <div className={`grid ${childrenCss} gap-4`}>
            {children}
        </div>
    </div>

)}

const OneComponent = ({children, title, icon, paragraph, colSpan}) => 
(
    <div className={`flex flex-col ${colSpan}`}>
        {icon ? (
            <div className="flex mb-1">
                <h2 className='text-sm'>{title}</h2>
                <FontAwesomeIcon icon={icon} className="text-[#2B8E9B] ml-2" />
            </div>
            ) 
            : (<h2 className='text-sm mb-1'>{title}</h2>)
        }
        <p className="text-xs mb-3">{paragraph}</p>
        {children}
      </div>
)
return {TwoComponents, OneComponent}

}

picture of the placeholder since I'm not sure if "placeholder" is the right term