Automatic input formatting to phone number format

Create a React component PhoneNumberInput that dynamically formats the characters entered into the input field into a familiar phone number format, for example +7 (___) ___--. As the user types, they see the number already formatted, without the need to manually insert parentheses, spaces, or dashes.

import "./styles.css";
import { PhoneNumberInput } from "./Input";

export default function App() {
  return (
    <div className="App">
      <div>Input</div>
      <PhoneNumberInput />
      <br />
      <br />
      <div>Your Input</div>
    </div>
  );
}

The task involves handling input events, cursor management, and maintaining the correct format in real-time.