Custom leaf in slate editor

How to integrate custom leaf to slate editor? I have tried the one below

leaves: [

'bold',

'italic',

{

name: Leaf.name,

Button: Leaf.Button,

Leaf: Leaf.Leaf,

},

],

but it throws

Uncaught Error: The

hook must be used inside the <Slate> component's context.

at useSlate (index.es.js:1659:1)

at Button (colorText.tsx:69:26)