Issue with Conditional Statements in React: Only Registering First Statement

I’m pretty new to react, and I’m trying to create a rating component with both whole and half stars using conditional statements. The issue that I’m having is that the correct number of stars is not showing up. For instance, I have the rating set at 4.5, and I’m only seeing one star. When I blocked out all the conditional statements before the 4.5 statement, it correctly shows 4.5 stars. I’m not sure what I’m doing wrong, and I would really appreciate any help or guidance on how to fix this issue.
Thank you!

import React, {useState} from 'react';
import { createReview, detailsProduct } from '../actions/productActions';
import { useDispatch, useSelector } from 'react-redux';
import {FaStar} from 'react-icons/fa';
import {FaStarHalf} from 'react-icons/fa';


 function StarRating () {
 const productDetails = useSelector((state) => state.productDetails);
 const { loading, error, product } = productDetails;
 var rating = product.rating;

if (rating = 1)
{
    return (

                   <FaStar />
    );
};

if (rating >= 1.5 && rating < 2 ){
    return (
                 <div>
                    <FaStar/>
                    <FaStarHalf/>
                 </div>
        );
};

if (rating >= 2 && rating < 2.5){
    return (
    <div>
     {[...Array(2)].map((star, i) => {
          return (
            <div>
               <FaStar/>
            </div>
       );   
     })}
     </div>
     )
   
    
}

if (rating >= 2.5 && rating < 3){
    return (
        <div>
     {[...Array(2)].map((star, i) => {
          return (
            <div>
               <FaStar/>
            </div>
       );   
     })}
        <div>
           <FaStarHalf/>
        </div>
        </div>
);         
}

if (rating >= 3 && rating < 3.5){
    return (
        <div>
        {[...Array(3)].map((star, i) => {
             return (
               <div>
                  <FaStar/>
               </div>
          );   
        })}
        </div>
);   
}

if (rating >= 3.5 && rating < 4){
    return (
        <div>
        {[...Array(3)].map((star, i) => {
             return (
               <div>
                  <FaStar/>
               </div>
          );   
        })}
           <div>
              <FaStarHalf/>
           </div>
           </div>
);   
}
if (rating >= 4 && rating < 3.5){
    return (
        <div>
        {[...Array(4)].map((star, i) => {
             return (
               <div>
                  <FaStar/>
               </div>
          );   
        })}
        </div>
);   
}
if (rating >= 4.5 && rating < 5 ){
    return (
        <div>
        {[...Array(4)].map((star, i) => {
             return (
               <div>
                  <FaStar/>
               </div>
          );   
        })}
           <div>
              <FaStarHalf/>
           </div>
           </div>
);   
}

if (rating >= 5){
    return (
        <div>
        {[...Array(5)].map((star, i) => {
             return (
               <div>
                  <FaStar/>
               </div>
          );   
        })}
        </div>
);   
}
};
export default StarRating;