Formatting code with <pre> tag in React and JSX

I am trying to use the pre tag inside of JSX.When you use the pre tag in JSX, it doesn't format at all. Why? In order to use the pre tag I need to do something like this:

const someCodeIWantToFormat = "var foo = 1"
const preBlock = { __html: "<pre>" + pythonCode + "</pre>" };
return(
  <div dangerouslySetInnerHTML={ preBlock } />;
)

Why?