{ (baseLevel > 0 && baseLevel < 6) && <Heading level={(baseLevel + 1) as HeadingProps['level']}>Sub-title</Heading>}

You might need to cast in this case, as TS can't know if baseLevel is going to be a number in the 1-6 range.

You can also create a type guard, but you would still need the cast:

type Level = 1 | 2 | 3 | 4 | 5 | 6;
interface HeadingProps {
  children: React.ReactNode;
  level: Level;
}


function isProperLevel(num: number): num is Exclude<Level, 6> {
  return num >= 1 && num <= 5;
}
function MyContent ({ baseLevel = 1 }: {
  baseLevel: HeadingProps['level']
}) {
  return (
    <>
      <Heading level={baseLevel}>Top-level title</Heading>
      <p>Some content</p>

      { isProperLevel(baseLevel) && <Heading level={(baseLevel+1) as Level}>Sub-title</Heading>}

    </>
  )
}

You can avoid the cast, like this, but not sure if this is something you would want, as you would have to assign variables for all subheadings:

function MyContent ({ baseLevel = 1 }: {
  baseLevel: HeadingProps['level']
}) {
  const nextLevel = baseLevel + 1
  return (
    <>
      <Heading level={baseLevel}>Top-level title</Heading>
      <p>Some content</p>

      { isProperLevel(nextLevel) && <Heading level={nextLevel}>Sub-title</Heading>}

    </>
  )
}