Reactjs render props pattern (The provider component pattern in emberjs)

//// Demo of render props pattern in React
//// Provider pattern in Emberjs (https://guides.emberjs.com/release/tutorial/part-2/provider-components/)

import React from 'react';
import './style.css';

const RentalsFilter = ({ rentals, query, render }) => {
  const filteredRentals = React.useMemo(() => {
    if (query) {
      rentals = rentals.filter((rental) => rental.title.includes(query));
    }
    return rentals;
  }, [rentals, query]);

  return render(filteredRentals);
};

export default function App() {
  const [query, setQuery] = React.useState('');
  return (
    <div>
      <input
        value={query}
        onChange={(e) => {
          setQuery(e.target.value);
        }}
      />
      <RentalsFilter
        query={query}
        rentals={[
          { title: 'Grand Old Mansion' },
          { title: 'Urban Living' },
          { title: 'Downtown Charm' },
        ]}
        render={(filteredRentals) => {
          return filteredRentals.map((o) => <li>{o.title}</li>);
        }}
      />
    </div>
  );
}