Screen Change Orientation Listener ReactJS - reactjs

Question

I am trying to make a different button position for both portrait and landscape versions of the React application I’m working on. I tried learning about event listeners and referred to these two posts, and inspected the console for a message while trying to rotate using an iPhoneX view on Google Chrome. However, I don’t seem to see a message of 'changed orientation'. Does anyone know the problem with my code? Feel free to ask for more clarification.
Welcome.js
import React, { Component} from "react";
import { Link } from "react-router-dom";
import "../style/App.css";
import { Typography, Button, Card, Grid } from "#material-ui/core";
import homepage2 from "../images/homepage2.png";
export default class WelcomeComponent extends Component {
onOrientationChange = (event) => {
console.log('changed orientation');
}
render() {
return (
<div onOrientationChange={this.onOrientationChange}
style={{
minHeight: "100vh",
backgroundImage: `url(${homepage2})`,
backgroundPosition: "center",
backgroundSize: "cover"
}}
>
<div
style={{
textAlign: "center",
verticalAlign: "bottom",
bottom: "0px"
}}
>
<Link to="/Language">
<Button
variant="contained"
color="secondary"
size="large"
style={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%,-50%)"
}}
>
CONTINUE
</Button>
</Link>
</div>
</div>
);
}
}