How to handle data display with multiple checkboxes in React Js

I'm working on a app where on component load after fetch GET API, list of cars are displayed to user. There're also multiple checkboxes which allow user to filter displayed data. I'm filtering the results depending on selected checkbox value, but the problem is that I don't know how to display first whole list of cars, and only then filtered results ( if user selects any checkbox). My code is:

import React, { useState, useEffect } from "react";

export default function CarsMain() {
  const [filterList] = useState([
    {
      value: "BMW"
    },
    {
      value: "Hyundai"
    },
    {
      value: "Mercedes"
    }
  ]);
  const [data, setData] = useState([]);
  const [filteredData, setFilteredData] = useState([]);

  useEffect(() => {
   
      fetch(url)
        .then(function (response) {
          return response.json();
        })
        .then(function (res) {
          setData(res);
        })
        .catch(function (e) {
          console.log(e);
        })
    );
  }, []);


  function handleCheckbox(value, e) {
    if (e.target.checked) {
      let selectedData = data.filter((d) => d.model === value);

      setFilteredData([...filteredData, ...selectedData]);
    } else {
      let unselected = filteredData.filter((d) => {
        return d.model !== value;
      });
      setFilteredData(uncheckedData);
    }
  }

  return (
  
          <div >
            {filterList?.map((v) => {
              return (
                <div key={v.model}>
                  <input
                    type="checkbox"
                    onChange={(e) => handleCheckbox(v.model, e)}
                  />
                </div>
              );
            })}
          </div>
           {filteredData.map((d) => {d.model})

        </div>
      </div>
    </div>
  );
}

checkbox select works fine, when BMV is selected, only cars with model === "BMV" are displayed, the issue is that when page loads there is no data displayed, only after I select one of the checkboxes, the list of cars would be displayed. I can't seem to figure out how to display the whole list at page load an then filteredData ( when/if user selects checkbox). I'm mapping over filteredData because if I map over data(stored from API), checkbox selection doesn't work. How can I display data received from API on page load and when no checkbox is selected, and only selected car models after user clicks checkbox. Any help and advise are greatly appreciated.