This may be one possible approach to achieve the desired objective:

const ImageSlider = ({ loadData, data, setData }) => {
  const imageLength = 4;    // number of images to be shown per-page
  const totalImages = data.length;
  const [startAt, setStartAt] = useSate(0);  // start rendering from image-0
  useEffect(() => {
    loadData().then((data) => setData(data));
  }, []);
  const switchImages = (direction = 'forward') => (
    setStartAt(prev => {
      if (direction === 'forward') {
        // if there are more images, reposition 'startAt' to next set
        if (prev + imageLength < totalImages) return prev + imageLength;
        return 0; // reset back to image-0
      } else {
        // if there is previous set, reposition to it's start
        if (prev - imageLength >= 0) return prev - imageLength;
        // otherwise, reposition to the start of the last-set
        return (Math.floor((totalImages - 1) / imageLength) * imageLength)
      };
    })
  );

  return (
    <div className="slider">
      <FaArrowCircleLeft
        className="slider-left-arrow"
        onClick={() => switchImages('reverse')}
      />
      <FaArrowCircleRight
        className="slider-right-arrow"
        onClick={() => switchImages()}
      />
      {Array.isArray(data) && data.filter((el, idx) => idx >= startAt && idx < (startAt + imageLength)).map((program, index) => {
        return (
          <div
            className={
              index === current
                ? "slider-active-program"
                : "slider-inactive-program"
            }
            key={index}
          >
            <img
              src={program.image}
              alt="program"
              className="slider-program-image"
            />
          </div>
        );
      })}
    </div>
  );
};

export default ImageSlider;

Explanation

• imageLength is fixed (set to 4)
• startAt is a state-variable (initially set to 0)
• data is rendered on return only when it is an Array
• switchImages is a method invoked on both left-arrow and right-arrow click-events (changing the parameter direction to reverse on left-arrow)
• startAt is updated based on the direction, the prev value, the totalImages and imageLength.

Suggestion

If one needs to render a message to the user that the data array is either not-yet-loaded or it is empty, it may be acccomplished by changing the {Array.isArray(data) && .... into a conditional such as {Array.isArray(data) ? ....<existing> : <some message here>.

Warning

The above code is only an approach. It is not tested & may contain syntax errors or other issues. Please use comments to share feedback and this answer may be updated accordingly.

I don't think you have to change much about your approach to get what you're looking for here.

To render the images to the left and right of your current selection and allow looping from the front to the back (as it looks like you want to do), we can paste a copy of the array to the front and back and select the middle slice. It's a little bit like this:

The implementation would just require you to replace the current .map(...) method in your return statement with this one:

[...data, ...data, ...data].slice(
  length + current - peekLeft,
  length + current + peekRight + 1
).map((program, index) => {
  ...
}

And then you can also remove the test and another state objects as well since they aren't necessary. You just need to add the peekLeft and peekRight or replace them inline inside the .map(...) statement. The first option may look something like this:

const peekLeft = 4;
const peekRight = 4;

const ImageSlider = ({ loadData, data, setData }) => {
  ...
}