Narrowed types do not flow into callback functions

[kolpav]

Bug Report

Previous discussion #37255 (comment)

Title is borrowed from @danielrentz #37255 (comment) I don't know if its accurate description of the problem.

🔎 Search Terms

None

🕗 Version & Regression Information

Any

⏯ Playground Link

Playground

💻 Code

import { FunctionComponent, useMemo } from 'react'

export interface ButtonProps {
  size?: 'sm' | 'base' | 'lg'
}

export const Button: FunctionComponent<ButtonProps> = props => {
  props.size ??= 'base'
  const sizeClassNames = useMemo(() => {
    return {
      sm: 'px-3 py-2 text-sm',
      base: 'px-4 py-2 text-sm',
      lg: 'px-4 py-2 text-base'
    }[props.size] // << Type 'undefined' cannot be used as an index type.(2538)
  }, [props.size])

  return (
    <button
      type="button"
      className={sizeClassNames}
    >
      Button text
    </button>
  )
}

🙁 Actual behavior

Type 'undefined' cannot be used as an index type.(2538)

🙂 Expected behavior

props.size should not be considered as undefined

[MartinJohns]

Another duplicate of #9998.

Besides that: Isn't it a big rule in React that components should not modify the props?