How to use React-datepicker with custom data

I am trying to make a custom react-datepicker but my code is not working correctly.

const [filterDateFrom, setFilterDateFrom] = useState("");
const [filterDateTo, setFilterDateTo] = useState("");
const [startDate, endDate] = filterDateFrom && filterDateTo;

then I have a function to pull the date and my return is something like:

<div>
  <DatePicker
   filterDateFrom={true}
   filterDateTo={true}
   startDate={startDate}
   endDate={endDate}
   onChange={(update) => {
   setFilterDateFrom(update) && setFilterDateTo(update)
   }}
   withPortal
   />
 </div>

But when I select the dates the code breaks.

The DatePicker on the official documentation looks like this:

<DatePicker
      selectsRange={true}
      startDate={startDate}
      endDate={endDate}
      onChange={(update) => {
        setDateRange(update);
      }}
    />

Any ideas?

Here is a snippet from my JSON file:

[
  {
    "id": 1,
    "Period From": "2021-01-31T23:00:00.000Z",
    "Period To": "2021-02-27T23:00:00.000Z",
  }
]

Update on my Code:

const [filterDateFrom, setFilterDateFrom] = useState(new Date());
const [filterDateTo, setFilterDateTo] = useState(null);

  const onChange = (dates) => {
    console.log(dates);
    const [start, end] = dates;
    setFilterDateFrom(start);
    setFilterDateTo(end);
  };

And then Im applying a filter that looks like this:

const displaySongs = songs
.filter((song) => {
keepSong &&=
        filterDateFrom === "" || filterDateTo === "" ||
        song["Period From"]?.toLowerCase().includes(filterDateFrom.toLowerCase() || song["Period To"]?.toLowerCase().includes(filterDateTo.toLowerCase()));

      return keepSong;
    })
    .map((song) => {
      return (
        <tr className="font-medium bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">

          ... I'm displaying more data here

          <td className="py-2 px-4 text-left">{song["Track Title"]}</td>
          ... and here.
        </tr>
      );
    });

return (
    <div className="flex-1 px-10">
      <div className="flex gap-4">
        <div className="flex sticky top-0 justify-between items-center my-10 gap-4 shadow-md rounded-md p-6 bg-slate-900">
      <div>
      <DatePicker
        selected={filterDateFrom}
        onChange={onChange}
        startDate={filterDateFrom}
        endDate={filterDateTo}
        selectsRange

      />
      </div>

      <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 shadow-md rounded">
        <thead className="text-gray-700 uppercase bg-slate-50 dark:bg-gray-700 dark:text-gray-400">
          <tr>
            <th className="py-2 px-4 text-left">Track Title</th>
          </tr>
        </thead>
        <tbody>{displaySongs}</tbody>
      </table>
      <div>

Im getting this error in my console:

react-dom.development.js:26923 Uncaught TypeError: filterDateFrom.toLowerCase is not a function