Astro Build Fastify SSR React-Select component not working - react-select

Question

I am currently using Astro SSR with Fastify\Node as my server. I created a SSR\Fastify plugin and its working well. I am running into one issue though,and wanted to see if others have faced similar issue. I am not able to use the React-Select component. It works well when running normal Astro-Build without SSR enabled. Once I run the build command I received the following error message when the page tries to load:Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object."
I am leaning towards import issue, but not having any luck narrowing it down.
The type definition is resolving to: react-select/dist/react-selectcjs.d.ts
I get the same error if I use the node ssr plugin as well. I'm not doing anything fancy with the JSX component, this is usage of the react-select:
import Select from "react-select"s
<Select
className="react-select info mx-5 w-100"
classNamePrefix="react-select"
name="singleSelect"
value={pageSelect}
onChange={(value) => {
gotoPage(value.value);
handlePageSelect(value);
}}
options={pageSelectData.map((prop, key) => {
return {
value: key,
label: "Page " + (key + 1),
};
})}
placeholder="Select page"
/>
<Select
className="react-select info mx-5 w-100"
classNamePrefix="react-select"
name="singleSelect"
value={numberOfRows}
onChange={(value) => {
console.log(value);
setPageSize(value.value);
setNumberOfRows(value);
}}
options={numberOfRowsData.map((prop) => {
return {
value: prop,
label: prop + " rows",
};
})}
placeholder="Select #rows"
/>

Answer 1

I found the issue:
I have astro layouts for the following:
SideBarLayout
NavBarLayout
BaseLayout
PageLayout
ContainerLayout
BlocksLayout
BlockLayout
FormLayout
Each of these also leverage a Jsx component. My ContainerLayout and SideBar was missing the client:load value. After correcting that, my forms load properly with event logic and everything and runs withing fastify sever.