jsx not highlighting as I would expect :(

[lewiswolf]

I was recently messing around with react-syntax-hightlighter for my website (here specifically) and it doesn't seem to want to highlight the nested jsx elements correctly. My code is shown below.

import React, { Component } from 'react'
import ReactMarkdown from 'react-markdown'
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
import { coy } from 'react-syntax-highlighter/dist/esm/styles/prism'

class Repository extends Component {
        ...

	codeBlock = ({ language, value }) => {
		return (
			<SyntaxHighlighter
				language={language}
				style={coy}
				customStyle={{
					background: 'unset',
					backgroundColor: 'none',
					border: 'none',
					margin: 0,
				}}
			>
				{value}
			</SyntaxHighlighter>
		)
	}

	render() {
		return (
			<div className='repository'>
					<ReactMarkdown
						className='readme'
						children={this.state.md}
						renderers: { code: this.codeBlock }
					/>
			</div>
		)
	}
}

Is this a problem with prism? Or am I doing something wrong on your end? Thanks.