Defining Custom Elements walkthrough help

[NeuroticCoder91]

I feel like I am missing something silly. I can't seem to get the block to change from 'paragraph' to 'code'. My console.log is registering hit, so I at least know my hotkey is working. Here is my code:

// import './App.css';
import React, { useCallback, useState } from 'react'
// Import the Slate editor factory.
import { 
  createEditor,
  Editor,
  Transforms  
} from 'slate'
// Import the Slate components and React plugin
import { Slate, Editable, withReact } from 'slate-react'

// Define an initial value
const initialValue = [
  {
    type: 'paragraph',
    children: [{ text: 'A line of text in a paragraph.'}],
  },
]

// Define our app
const App = () => {
  // Create a Slate editor obj that won't change across renders
  const [editor] = useState(() => withReact(createEditor()))

  // Define a rendering function based on the element passed to 'props'.
  // We use 'useCallback' here to memoize the function for subsequent renders.
  const renderElement = useCallback(props => {
    switch (props.element.type) {
      case 'code':
        return <CodeElement {...props} />
      default:
        return <DefaultElement {...props} />
    }
  }, [])

  // Render the Slate context
  return (
    <Slate editor={editor} value={initialValue}>
      <Editable 
        // Pass in the 'renderElement' function.
        renderElement={renderElement}
        // Define a handler
        onKeyDown={event => {
          if (event.key === '`' && event.ctrlKey) {
            event.preventDefault()
            // Determine whether any of the currently selected blocks are code blocks.
            console.log('hit')
            const [match] = Editor.nodes(editor, {
              match: n => n.type === 'code',
            })
            // Toggle the block type depending on whether there's already a match.
            Transforms.setNodes(
              editor,
              { type: match ? 'paragraph' : 'code' },
              { match: n => Editor.isBlock(editor, n) }
            )
          }
        }}
      />
    </Slate>
  )
}

// Define a React component renderer for a code block.
const CodeElement = props => {
  return (
    <pre {...props.attributes}>
      <code>{props.children}</code>
    </pre>
  )
}

// Define a React component renderer for our default elemtns.
const DefaultElement = props => {
  return <p {...props.attributes}>{props.children}</p>
}

export default App;