JS checking makes JSX props optional when inferred through JSX.LibraryManagedAttributes

Bug Report

Reported as part of #45140, moving to its own issue.

🔎 Search Terms

js jsx props optional

🕗 Version & Regression Information

• This is the behavior in every version I tried

⏯ Playground Link

Playground link with relevant code

💻 Code

// @Filename: index.jsx

import React from "react";
import PropTypes from "prop-types";

function MyComponent({ prop1, prop2, prop3 }) {
  return (
    <div>
      <span>{prop1}</span>
      <span>{prop2}</span>
    </div>
  );
}

MyComponent.propTypes = {
  prop1: PropTypes.string.isRequired,
  prop2: PropTypes.bool,
  prop3: PropTypes.shape({
    p1: PropTypes.string
  })
};

// All props show as optional in quick info / completions, and there's no error for missing prop1.
// The type of the JSX props is inferred from `MyComponent.propTypes` via JSX.LibraryManagedAttributes,
// but the optionality appears wrong. Switching the language to TypeScript makes this behave as expected.
(<MyComponent prop2 />)

🙁 Actual behavior

All props show as optional in quick info / completions, and there's no error for missing prop1. The type of the JSX props is inferred from MyComponent.propTypes via JSX.LibraryManagedAttributes, but the optionality appears wrong. Switching the language to TypeScript makes this behave as expected.

🙂 Expected behavior

The prop1 JSX prop shows as required and an error is shown on the JSX element since it’s missing.

Start with the linked TypeScript Playground and the index.jsx example, focusing on JSX.LibraryManagedAttributes and the propTypes assignment. Compare JavaScript checking with the same code in TypeScript to trace why requiredness is lost. Done means prop1 is shown as required and produces a missing-prop error.