Code

Code inside a sentence, or a listing across the full width. The listing scrolls sideways — the one thing hand-rolled listings get wrong.

When to use it

A sentence contains a property name, a key, a module path or a value the user will really type. Setting it apart from prose carries meaning: the reader can tell what to copy verbatim.
You are showing several lines of code — block. When it is TSX, add lang: colour tells a string from a keyword and an attribute from a tag, which on a longer sample is the difference between reading and decoding.

When not to use it

You only want a different typeface or emphasis. For emphasis there is <strong>; <code> says "this is code", and when it is not, that is a lie about meaning.
It is an internal identifier the user will never see or type — a column name, a table key. That text does not belong in a customer-facing interface at all, monospace or otherwise.

Properties

children: ReactNode — The code. Not translated.
block: boolean — A full-width listing instead of code inside a sentence.
lang: "tsx" — Colours the listing's syntax. Only with block, and only when the content is text — otherwise the listing renders as it came.
testId: string — data-testid of the element.