react-syntax-highlighter dont work with react-markdown

Question

I want to program an article reader

I use react-markdown and to style <code> I use react-syntax-highlighter

All articles and explanations use:

<ReactMarkdown className={'mark'} source={input} renderers={{code:Component}}/>

This tag does not work

but this did :

  <Markdown  className={"mark"}  components={{
    code:Component
  }}> 

and I changed renders to componentsAccording to the Console instructions

this is the final code but it didn't work

function App() {
  const [input,setIput]= useState('')

  return (
    <div className='app'>
    <textarea  
    autoFocus
    className='textarea'
     value={input}
     onChange={(e)=>setIput(e.target.value)}
     />
  
  <Markdown  className={"mark"}  components={{
    code:Component
  }}> 
 {input}

 </Markdown> 
    </div>
  )
}

export default App

const Component = ({value,lang}) => {
  return (
    <SyntaxHighlighter language={lang ?? null} style={docco}>
      {value ?? ' '}
    </SyntaxHighlighter>
  );
}

enter image description here