How to input array into 1 column table ? Audience number 2 have 2 Films B & C. I want to become 1 column. ex [Film B, Film C] in Column Film.

My Table => The Table Image

const AudienceListComponent = () => {
    const [audience, setAudience] = useState([])
    console.log("audience", audience)
    const getAllAudience = () => {
        AudienceService.getAllAudiences().then((response) => {
            console.log('response', response)
            setAudience(response.data)
        })
    }
    useEffect(() => {
        getAllAudience()
    }, [])
    return (
        <div>
            <table className="table table-bordered table-bordered">
                <thead className="table-dark">
                <tr>
                    <th>No</th>
                    <th>Audience Name</th>
                    <th>Film</th>
                </tr>
                </thead>
                <tbody>
                {
                    audience.map((aud, i) => (
                        <tr key={aud.id}>
                            <td>{i + 1}</td>
                            <td>{aud.name}</td>
                            {aud.film.map(films =>
                                <td>{films.title}</td>
                            )}
                        </tr>
                    ))
                }
                </tbody>
            </table>
        </div>
    );
};
export default AudienceListComponent;