容器组件包裹的Select组件值更新但占位符未变化问题

我有一个Select组件，点击选项后占位符不会变化。该组件被包裹在一个用于统一样式（包含标题、段落和Select组件）的容器组件中，另一个使用该容器的Select组件也出现同样问题。经检查，组件的状态值已更新，功能也正常，仅占位符未变化。

正常工作的原始结构代码 #

<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>

出现问题的当前结构代码 #

<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>

相关容器组件代码 #

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}

占位符截图 #

内容的提问来源于stack exchange，提问作者Johann Mendoza