Profanity Filter with ReactJS

Consider the following code:

/* eslint-disable array-callback-return */
/* eslint-disable no-unused-expressions */
import React from 'react'
import './App.css';


let swear = [
'arse',
'ass',
'asshole',
'bastard',
'bitch',
'bollocks',
'bugger',
'bullshit',
'crap',
'damn',
'frigger',
]

const App = () => {
  let [count , setCount] = React.useState(0)
  let [approval , setApproval] = React.useState(false)
  let [text , setText] = React.useState('')


  
  const bogusCheck = (text) =>{
    swear.map(word => {
      text.includes(word) === true ? (console.log('Bad word found') ): (console.log('No bad word found')); 
    })
  }

  return (
    <div className="App">
      <h1>Profanity Checker</h1>
      <p>Enter a sentence below and click the button below:</p>
      <textarea cols="30" rows='10' value={text} onChange={e => setText(e.target.value) } />
      <br />
      <button onClick={() => bogusCheck(text)} >Profanity Check</button>
    </div>

  );
}
export default App;

This is supposed to be a profanity filter. The theory is that it takes input from the text area and then uses the .map() and .includes() function to compare.

swear is an array it includes some bad word.

So the map loops over the swear array, picks up each word and see if it is included in the text. If returns true it console logs (Bad word found). If not it logs(No bad word found)

The issue is that when I click the button, it logs 13 times the not required result and then logs once the required result followed by more non required result. See the image below.

What is the turnabout solution for this??

(NOTE: THIS ALGORITHM / FUNCTION WILL BE USED IN A LARGE PROJECT I'M CURRENTLY DOING FOR A UNIVERSITY, SO A GOOD SOLUTION IS REQUIRED)

Thanks in Advance