I hope it will help you:

const filteredArray = useMemo(() => {
   const used = []
   
   return myArray.map(sub => {
      return { ...sub, arr:sub.arr.map(el 
    => {
      if(used.includes(el) return null
      used.push(el)
      return el
    }}
   })
}, deps)

And then in JSX:

filteredArray.map(() => ...)

All of these answer are good...I think @vitaliyirtlach has the best as its the closest to React.

I'll just put it out there that you can also loop through myArray, remove the duplicates with Set and then place them in an array that you can loop over:

    const myArray = [
    
        {
            arr: [''],
            val: "string"
        },
        {
            arr: ['bye', 'hello'],
            val: "string"
        },
        {
            arr: ['hello'],
            val: "string"
        }
    
    ]
    
    const removeDupes = () => {
      const newArr = []
      myArray.map(item => item.arr.map((el, index) =>
        newArr.push(el)     
      ))
      return [...new Set(newArr)]
    }
    
    const loopArray = removeDupes();
    
    console.log(loopArray)// logs ["","bye","hello"]

    loopArray.map((el, index) =>
      <p key={index}>{el}</p>
    ))    

You could simply manage an array to filter what you want to display :

import React from 'react';
import { render } from 'react-dom';
import './style.css';

const App = () => {
  const data = [
    {
      arr: [''],
      val: 'string',
    },
    {
      arr: ['bye', 'hello'],
      val: 'string',
    },
    {
      arr: ['hello'],
      val: 'string',
    },
  ];

  const buildData = () => {
    const passedValues = [];
    return data.map((item) => {
      return item.arr.map((el) => {
        if (!passedValues.includes(el)) {
          passedValues.push(el);
          return <div>{el}</div>;
        }
      });
    });
  };

  return <div>{buildData()}</div>;
};

render(<App />, document.getElementById('root'));

Here is the repro on StackBlitz.