Javascript Check if a Date is contained in an Array - React Js

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
  </head>

<body>
    <div id="app"></div>
    <script type="text/babel">
      const { useState, useEffect } = React;

const App = () => {
        const datesArray = [
          new Date("2023-06-25"),
          new Date("2023-06-26"),
          new Date("2023-06-27"),
          // Add more dates to the array as needed
        ];

const checkIfDateExists = (dateToCheck) => {
          return datesArray.some((date) => {
            // Compare the dates using getTime() to get the numeric representation
            return date.getTime() === dateToCheck.getTime();
          });
        };

const dateToCheck = new Date("2023-06-26");
        const isDateInArray = checkIfDateExists(dateToCheck);

return (
          <div className="container">
            <p>Date to check: {dateToCheck.toDateString()}</p>
            <p>Array contains {isDateInArray ? "the" : "no"} matching date.</p>
            <p>Dates array:</p>
            <ul>
              {datesArray.map((date, index) => (
                <li key={index}>{date.toDateString()}</li>
              ))}
            </ul>
          </div>
        );
      };

ReactDOM.render(<App />, document.getElementById("app"));
    </script>
    <style>
      .container {
        text-align: center;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12),
          0 2px 4px 0 rgba(0, 0, 0, 0.24);
        width: 600px;
        margin: 0 auto;
        padding: 20px;
      }
      .container p {
        margin: 0;
        padding: 5px 0;
      }

.container p:first-child {
        font-weight: bold;
      }

.container ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
      }

.container ul li {
        padding: 5px 0;
      }
    </style>
  </body>
</html>