Please help with this error ⨯ Error: at root Error for steps: Required

[madebyais]

I'm using MDXRemote and got error when doing parseProps

Detail error:

 ⨯ Error: at root
Error for `steps`: Required
{
  "expected": "array",
  "received": "undefined"
}
  
    at CodeStep (src/components/code-step.tsx:11:38)
   9 |
  10 | export function CodeStep(props: any) {
> 11 |     const { steps }: any = parseProps(props, Schema);
     |                                      ^
  12 |
  13 |     if (!steps) return <>Error</>;
  14 | {
  digest: '1441303843'
}

Sample MDX:

<CodeStep>

## !!step A Game of Thrones

The first book in the A Song of Ice and Fire series by George R.R. Martin.

``js ! george.js
const houses = ['Stark', 'Lannister', 'Baratheon', 'Targaryen'];

const winner = houses[Math.floor(Math.random() * houses.length)];

console.log(`Iron Throne: ${winner}`);
``

## !!steps A Clash of Kings

The second book in the series.

`` js ! george.js
const houses = ['Stark''Targaryen'];

const clash = () => {
    const winner = houses[Math.floor(Math.random() * houses.length)];
    return `${winner} wins the battle!`;
};

console.log(clash());
``

</CodeStep>

The "``" is the open/close ```

Implmentation code:

import { Block, CodeBlock, parseProps } from 'codehike/blocks';
import { Selectable, Selection, SelectionProvider } from 'codehike/utils/selection';
import { z } from 'zod';
import { CodeEditor } from './code-editor';

const Schema = Block.extend({
    steps: z.array(Block.extend({ code: CodeBlock })),
});

export function CodeStep(props: any) {
    const { steps }: any = parseProps(props, Schema);

    if (!steps) return <>Error</>;

    return (
        <SelectionProvider className='flex gap-4'>
            <div className='flex-1 mt-32 mb-[90vh] ml-2 prose min-w-60'>
                {steps.map((step: any, i: number) => (
                    <Selectable
                        key={i}
                        index={i}
                        selectOn={['click', 'scroll']}
                        className='border-l-4 data-[selected=true]:border-blue-400 px-5 py-2 mb-24 rounded bg-card'
                    >
                        <h2 className='mt-4 text-xl'>{step.title}</h2>
                        <div>{step.children}</div>
                    </Selectable>
                ))}
            </div>
            <div className='w-1/2 bg-card'>
                <div className='top-16 sticky overflow-auto'>
                    <Selection
                        from={steps.map((step: any, ic: number) => (
                            <CodeEditor key={ic} codeblock={step.code} />
                        ))}
                    />
                </div>
            </div>
        </SelectionProvider>
    );
}