When using a store in combination with custom shapes
Hey, I ran into an error while using tldraw:

As soon as i enable the store in combination with a custom shape the error happens....

```js
ValidationError: At shape.type: Expected one of "arrow" or "bookmark" or "draw" or "embed" or "frame" or "geo" or "group" or "highlight" or "image" or "line" or "note" or "text" or "video", got "my-custom-shape"
    at prefixError (http://localhost:5420/@fs/Users/pascalvanhecke/schooltaal/tldraw/packages/validate/src/lib/validation.ts:57:13)
    at Validator.validationFn (http://localhost:5420/@fs/Users/pascalvanhecke/schooltaal/tldraw/packages/validate/src/lib/validation.ts:571:12)
    at Validator.validate (http://localhost:5420/@fs/Users/pascalvanhecke/schooltaal/tldraw/packages/validate/src/lib/validation.ts:93:28)
    at RecordType.validate (http://localhost:5420/@fs/Users/pascalvanhecke/schooltaal/tldraw/packages/store/src/lib/RecordType.ts:151:31)
    at StoreSchema.validateRecord (http://localhost:5420/@fs/Users/pascalvanhecke/schooltaal/tldraw/packages/store/src/lib/StoreSchema.ts:48:31)
    at http://localhost:5420/@fs/Users/pascalvanhecke/schooltaal/tldraw/packages/store/src/lib/Store.ts:156:42
    at http://localhost:5420/@fs/Users/pascalvanhecke/schooltaal/tldraw/packages/store/src/lib/Store.ts:581:32
    at transact (http://localhost:5420/@fs/Users/pascalvanhecke/schooltaal/tldraw/packages/state/src/lib/transactions.ts:280:16)
    at Store.atomic (http://localhost:5420/@fs/Users/pascalvanhecke/schooltaal/tldraw/packages/store/src/lib/Store.ts:571:16)
    at Store.put (http://localhost:5420/@fs/Users/pascalvanhecke/schooltaal/tldraw/packages/store/src/lib/Store.ts:119:14)
```



This is my code

```js
import { throttle } from 'lodash'
import { useLayoutEffect, useMemo, useState } from 'react'
import {
	DefaultSpinner,
	type Geometry2d,
	HTMLContainer,
	type RecordProps,
	Rectangle2d,
	ShapeUtil,
	T,
	type TLBaseShape,
	type TLResizeInfo,
	Tldraw,
	createTLStore, getSnapshot, loadSnapshot,
	resizeBox,
} from 'tldraw'
import 'tldraw/tldraw.css'
// There's a guide at the bottom of this file!

// [1]
type ICustomShape = TLBaseShape<
	'my-custom-shape',
	{
		w: number
		h: number
		text: string
	}
>

// [2]
export class MyShapeUtil extends ShapeUtil<ICustomShape> {
	// [a]
	static override type = 'my-custom-shape' as const
	static override props: RecordProps<ICustomShape> = {
		w: T.number,
		h: T.number,
		text: T.string,
	}

	// [b]
	getDefaultProps(): ICustomShape['props'] {
		return {
			w: 200,
			h: 200,
			text: "I'm a shape!",
		}
	}

	// [c]
	override canEdit() {
		return false
	}
	override canResize() {
		return true
	}
	override isAspectRatioLocked() {
		return false
	}

	// [d]
	getGeometry(shape: ICustomShape): Geometry2d {
		return new Rectangle2d({
			width: shape.props.w,
			height: shape.props.h,
			isFilled: true,
		})
	}

	// [e]
	override onResize(shape: any, info: TLResizeInfo<any>) {
		return resizeBox(shape, info)
	}

	// [f]
	component(shape: ICustomShape) {
		return <HTMLContainer style={{ backgroundColor: '#efefef' }}>{shape.props.text}</HTMLContainer>
	}

	// [g]
	indicator(shape: ICustomShape) {
		return <rect width={shape.props.w} height={shape.props.h} />
	}
}

// [3]
const customShape = [MyShapeUtil]
const PERSISTENCE_KEY = 'tldraw-example-custom-shape'
export default function CustomShapeExample() {

	//[1]
		const store = useMemo(() => createTLStore(), [])
		//[2]
		const [loadingState, setLoadingState] = useState<
			{ status: 'loading' } | { status: 'ready' } | { status: 'error'; error: string }
		>({
			status: 'loading',
		})
		//[3]
		useLayoutEffect(() => {
			setLoadingState({ status: 'loading' })
	
			// Get persisted data from local storage
			const persistedSnapshot = localStorage.getItem(PERSISTENCE_KEY)
	
			if (persistedSnapshot) {
				try {
					const snapshot = JSON.parse(persistedSnapshot)
					loadSnapshot(store, snapshot)
					setLoadingState({ status: 'ready' })
				} catch (error: any) {
					setLoadingState({ status: 'error', error: error.message }) // Something went wrong
				}
			} else {
				setLoadingState({ status: 'ready' }) // Nothing persisted, continue with the empty store
			}
	
			// Each time the store changes, run the (debounced) persist function
			const cleanupFn = store.listen(
				throttle(() => {
					const snapshot = getSnapshot(store)
					localStorage.setItem(PERSISTENCE_KEY, JSON.stringify(snapshot))
				}, 500)
			)
	
			return () => {
				cleanupFn()
			}
		}, [store])
	
		// [4]
		if (loadingState.status === 'loading') {
			return (
				<div className="tldraw__editor">
					<h2>
						<DefaultSpinner />
					</h2>
				</div>
			)
		}
	
		if (loadingState.status === 'error') {
			return (
				<div className="tldraw__editor">
					<h2>Error!</h2>
					<p>{loadingState.error}</p>
				</div>
			)
		}
	return (
		<div className="tldraw__editor">
			<Tldraw
				shapeUtils={customShape}
				store={store}
				onMount={(editor) => {
					editor.createShape({ type: 'my-custom-shape', x: 100, y: 100 })
				}}
			/>
		</div>
	)
}

```