SSR Support for Select component about suid HOT 3 OPEN

import { Box, FormControl, InputLabel, MenuItem } from "@suid/material";
import { createSignal } from "solid-js";
import { clientOnly } from 'solid-start/islands';

const Select = clientOnly(() => import('@suid/material/Select'));

export default function StateSelect() {
  const [age, setAge] = createSignal("");

  const handleChange = (event) => {
    setAge(event.target.value);
  };

  return (
    <Box sx={{ minWidth: 120 }}>
      <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age()}
          label="Age"
          onChange={handleChange}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </Box>
  );
}