React Js Skip Element of Array in .map() Function

<!DOCTYPE html>
<html>

const excludedFruits = ["Kiwi", "Grapes"]; // Names of fruits to skip

const result = data.map(fruit => {
        if (excludedFruits.includes(fruit.name)) {
          // Skip the elements with names in the excludedFruits array
          return null; // You can use any value or component here
        }

return (
          <div key={fruit.name} className="fruit-item">
            <p className="fruit-name">Name: {fruit.name}</p>
            <p className="fruit-color">Color: {fruit.color}</p>
          </div>

);
      });

return (
        <div className='container'>
          <h3>React Js Skip Element of Array in .map() Function</h3>
          {result}
          <p>  Skipped Element : {excludedFruits.join(',')}</p>
        </div>
      );
    }

ReactDOM.render(<App />, document.getElementById("app"));
  </script>

.container {
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      text-align: center;
      max-width: 600px;
      margin: 0 auto;
    }
  </style>
</body>

</html>