React PropTypes defaultProps doesnt work, when "null" is passed

The default props is used only when you not marking props as required

Here is also an eslint rule for that

When you mark it as required, you are sure that the props will be passed, so there will be no reason to have defaultProps

MyComponent.propTypes = {
  firstName: PropTypes.string,
};

MyComponent.defaultProps = {
  firstName: "John Doe"
};

OR

MyComponent.propTypes = {
  firstName: PropTypes.string.isRequired,
};

Also, when you are passing props as null, meaning that the prop's variable is not referenced to any actual value, which is equivalent to not passing it.

You should use or with undefined behind. it make sure we don't pass null value to the component. It uses undefined instead and defaultProps will work

<MyComponent firstName={firstName || undefined} />

https://codesandbox.io/embed/proptypes-in-react-forked-g29oy?fontsize=14&hidenavigation=1&theme=dark