How to use material-ui's Autocomplete component when using a react CDN - reactjs

Question

I am able to use the [TextField, Checkbox, Button . .] etc components but unable to render the Autocomplete component from the lab material-ui package.
Here's how I'm adding React and material-ui to my page / file.
<div id="app"></div>
<script src="https://unpkg.com/react#17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/#material-ui/core#latest/umd/material-ui.development.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<sript src="https://unpkg.com/#material-ui/lab#4.0.0-alpha.58/index.js"></sript>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
React code:
<script type="text/babel">
//React hooks
const {useState, useEffect} = React;
// Material-ui Components
const {
Button,
Checkbox,
Autocomplete,
TextField,
} = MaterialUI;
const Current_system = [
{ title: "Abdifatah" },
{ title: "Arneau" },
{ title: "Ben" },
];
function CheckboxesTags() {
return (
<Autocomplete
multiple
options={Current_system}
disableCloseOnSelect
getOptionLabel={(option) => option.title}
renderOption={(option, { selected }) => (
<React.Fragment>
<Checkbox checked={selected} />
{option.title}
</React.Fragment>
)}
style={{ width: 500 }}
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
label="System"
placeholder="Search"
/>
)}
/>
);
}
function App() {
return (
<div >
<Button>Button from MUI</Button>
<br/>
<TextField />
<CheckboxesTags />
</div>
);
}
ReactDOM.render(<App />, document.getElementById('app'));
</script>
Screenshot of the button and textfield components being rendered:
The Autocomplete components works when I import MUI-lab like the below but not with CDN.
This will work when doing it on codesandbox or using create-react-app::
import Autocomplete from "#material-ui/lab/Autocomplete";
Codesandbox example
This is the error I get on the console:
react.development.js:245
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `CheckboxesTags`.
at CheckboxesTags
at div
at App
printWarning # react.development.js:245
error # react.development.js:221
createElementWithValidation # react.development.js:2240
CheckboxesTags # Inline Babel script:22
renderWithHooks # react-dom.development.js:15015
mountIndeterminateComponent # react-dom.development.js:17841
beginWork # react-dom.development.js:19079
beginWork$1 # react-dom.development.js:23970
performUnitOfWork # react-dom.development.js:22806
workLoopSync # react-dom.development.js:22737
renderRootSync # react-dom.development.js:22700
performSyncWorkOnRoot # react-dom.development.js:22323
scheduleUpdateOnFiber # react-dom.development.js:21911
updateContainer # react-dom.development.js:25512
(anonymous) # react-dom.development.js:26051
unbatchedUpdates # react-dom.development.js:22461
legacyRenderSubtreeIntoContainer # react-dom.development.js:26050
render # react-dom.development.js:26133
(anonymous) # Inline Babel script:57
yq # babel.min.js:13
s # babel.min.js:13
vq # babel.min.js:13
(anonymous) # babel.min.js:13
Fq # babel.min.js:13
Iq # babel.min.js:13
react.development.js:245 Warning:
React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `CheckboxesTags`.
at CheckboxesTags
at div
at App
printWarning # react.development.js:245
error # react.development.js:221
createElementWithValidation # react.development.js:2240
CheckboxesTags # Inline Babel script:22
renderWithHooks # react-dom.development.js:15015
mountIndeterminateComponent # react-dom.development.js:17841
beginWork # react-dom.development.js:19079
callCallback # react-dom.development.js:3942
invokeGuardedCallbackDev # react-dom.development.js:3991
invokeGuardedCallback # react-dom.development.js:4053
beginWork$1 # react-dom.development.js:23994
performUnitOfWork # react-dom.development.js:22806
workLoopSync # react-dom.development.js:22737
renderRootSync # react-dom.development.js:22700
performSyncWorkOnRoot # react-dom.development.js:22323
scheduleUpdateOnFiber # react-dom.development.js:21911
updateContainer # react-dom.development.js:25512
(anonymous) # react-dom.development.js:26051
unbatchedUpdates # react-dom.development.js:22461
legacyRenderSubtreeIntoContainer # react-dom.development.js:26050
render # react-dom.development.js:26133
(anonymous) # Inline Babel script:57
yq # babel.min.js:13
s # babel.min.js:13
vq # babel.min.js:13
(anonymous) # babel.min.js:13
Fq # babel.min.js:13
Iq # babel.min.js:13
react-dom.development.js:25088 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `CheckboxesTags`.
at createFiberFromTypeAndProps (react-dom.development.js:25088)
at createFiberFromElement (react-dom.development.js:25116)
at reconcileSingleElement (react-dom.development.js:14082)
at reconcileChildFibers (react-dom.development.js:14142)
at reconcileChildren (react-dom.development.js:17020)
at mountIndeterminateComponent (react-dom.development.js:17920)
at beginWork (react-dom.development.js:19079)
at HTMLUnknownElement.callCallback (react-dom.development.js:3942)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3991)
at invokeGuardedCallback (react-dom.development.js:4053)
createFiberFromTypeAndProps # react-dom.development.js:25088
createFiberFromElement # react-dom.development.js:25116
reconcileSingleElement # react-dom.development.js:14082
reconcileChildFibers # react-dom.development.js:14142
reconcileChildren # react-dom.development.js:17020
mountIndeterminateComponent # react-dom.development.js:17920
beginWork # react-dom.development.js:19079
callCallback # react-dom.development.js:3942
invokeGuardedCallbackDev # react-dom.development.js:3991
invokeGuardedCallback # react-dom.development.js:4053
beginWork$1 # react-dom.development.js:23994
performUnitOfWork # react-dom.development.js:22806
workLoopSync # react-dom.development.js:22737
renderRootSync # react-dom.development.js:22700
performSyncWorkOnRoot # react-dom.development.js:22323
scheduleUpdateOnFiber # react-dom.development.js:21911
updateContainer # react-dom.development.js:25512
(anonymous) # react-dom.development.js:26051
unbatchedUpdates # react-dom.development.js:22461
legacyRenderSubtreeIntoContainer # react-dom.development.js:26050
render # react-dom.development.js:26133
(anonymous) # Inline Babel script:57
yq # babel.min.js:13
s # babel.min.js:13
vq # babel.min.js:13
(anonymous) # babel.min.js:13
Fq # babel.min.js:13
Iq # babel.min.js:13
react-dom.development.js:20115
The above error occurred in the <CheckboxesTags> component:
at CheckboxesTags
at div
at App
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError # react-dom.development.js:20115
update.callback # react-dom.development.js:20148
callCallback # react-dom.development.js:12348
commitUpdateQueue # react-dom.development.js:12369
commitLifeCycles # react-dom.development.js:20766
commitLayoutEffects # react-dom.development.js:23456
callCallback # react-dom.development.js:3942
invokeGuardedCallbackDev # react-dom.development.js:3991
invokeGuardedCallback # react-dom.development.js:4053
commitRootImpl # react-dom.development.js:23181
unstable_runWithPriority # react.development.js:2764
runWithPriority$1 # react-dom.development.js:11306
commitRoot # react-dom.development.js:23020
performSyncWorkOnRoot # react-dom.development.js:22359
scheduleUpdateOnFiber # react-dom.development.js:21911
updateContainer # react-dom.development.js:25512
(anonymous) # react-dom.development.js:26051
unbatchedUpdates # react-dom.development.js:22461
legacyRenderSubtreeIntoContainer # react-dom.development.js:26050
render # react-dom.development.js:26133
(anonymous) # Inline Babel script:57
yq # babel.min.js:13
s # babel.min.js:13
vq # babel.min.js:13
(anonymous) # babel.min.js:13
Fq # babel.min.js:13
Iq # babel.min.js:13
react-dom.development.js:4002 Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://reactjs.org/link/crossorigin-error for more information.
at Object.invokeGuardedCallbackDev (react-dom.development.js:4002)
at invokeGuardedCallback (react-dom.development.js:4053)
at beginWork$1 (react-dom.development.js:23994)
at performUnitOfWork (react-dom.development.js:22806)
at workLoopSync (react-dom.development.js:22737)
at renderRootSync (react-dom.development.js:22700)
at performSyncWorkOnRoot (react-dom.development.js:22323)
at scheduleUpdateOnFiber (react-dom.development.js:21911)
at updateContainer (react-dom.development.js:25512)
at react-dom.development.js:26051
How can I achieve this?