State is not changing within Transition component when inProp changes

[o2bomb]

What is the current behavior?

The state prop passed to the Transition's children does not change and stays on the "exited" state, even when the value of inProp changes.

What is the expected behavior?

The state prop changes when the value of inProp changes.

Could you provide a CodeSandbox demo reproducing the bug?

I am using react-transition-group v4.4.2 with MUI v5.0.1.

const Foo: React.FC = () => {
	const [reveal, setReveal] = useState(false)

	return (
		<Box sx={{
			overflow: "hidden",
			position: "relative",
			minHeight: "100vh",
		}}>
			<button onClick={() => setReveal((prev) => !prev)}>asdfa</button>
			<MiddleText inProp={reveal} sx={{
				position: "absolute",
				top: "50%",
				left: "50%",
				transform: "translate(-50%, -50%)",
			}}>
				Hello hello
			</MiddleText>
		</Box>
	)
}

interface TransitionableTextProps extends TypographyProps {
	inProp: boolean
}

const TransitionableText: React.FC<TransitionableTextProps> = ({ inProp, sx, ...props }) => {
	const duration = 200

	const transitionStyles: { [key in TransitionStatus]: any } = {
		entering: { opacity: 1 },
		entered: { opacity: 1 },
		exiting: { opacity: 0 },
		exited: { opacity: 0 },
		unmounted: { opacity: 0 },
	}

	return (
		<Transition inProp={inProp} timeout={duration}>
			{state => {
				console.log(inProp, state)
				return (
					<Typography sx={{
						...sx,
						...transitionStyles[state],
						transition: `opacity ${duration}ms ease-in`,
					}} {...props} />
				)
			}
			}
		</Transition>
	)
}

const MiddleText = styled(TransitionableText)({
	fontSize: "3rem",
	textTransform: "uppercase",
})