How to use MUI in Fresh?

import { Button } from "https://esm.sh/@mui/material@5.11.3";

export default function MyApp() {
  return (
    <div>
      <Button variant="contained">Hello World</Button>
    </div>
  );
}

An error occurred during route handling or page rendering. Error: [object Object] is not a valid HTML tag name in <[object Object] variant="contained">
    at E (https://esm.sh/v102/preact-render-to-string@5.2.4/X-ZS8q/deno/preact-render-to-string.js:12:2370)
    at E (https://esm.sh/v102/preact-render-to-string@5.2.4/X-ZS8q/deno/preact-render-to-string.js:12:2689)
    at E (https://esm.sh/v102/preact-render-to-string@5.2.4/X-ZS8q/deno/preact-render-to-string.js:12:1729)
    at E (https://esm.sh/v102/preact-render-to-string@5.2.4/X-ZS8q/deno/preact-render-to-string.js:12:1729)
    at E (https://esm.sh/v102/preact-render-to-string@5.2.4/X-ZS8q/deno/preact-render-to-string.js:12:1729)
    at E (https://esm.sh/v102/preact-render-to-string@5.2.4/X-ZS8q/deno/preact-render-to-string.js:12:1729)
    at E (https://esm.sh/v102/preact-render-to-string@5.2.4/X-ZS8q/deno/preact-render-to-string.js:12:1729)
    at q (https://esm.sh/v102/preact-render-to-string@5.2.4/X-ZS8q/deno/preact-render-to-string.js:12:316)
    at realRender (https://deno.land/x/fresh@1.1.2/src/server/render.ts:167:16)
    at Object.render (https://deno.land/x/fresh@1.1.2/src/server/render.ts:185:7)