You can pass the condition inside input disable attribute.

Here is the code sample from your question:

<FlexBox alignItems="center" mb="16px">
    {sizeList && sizeList.map((item) => (
        <SizeVariant
            key={item.attribute_title}
            text={item.attribute_title}
            onClick={(e) => handlePrice(item)}
            disabled={item.attribute_disable} />
    ))}
</FlexBox>

// sizevariant
const SizeVariant = ({ text, disabled, ...props }) => {
    return (
        <StyledSizeVariant {...props}>
            <input type="radio" name="text" id={text} value={text} disabled={disabled} />
            <label htmlFor={text}>{text}</label>
        </StyledSizeVariant>
    );
}

In here you can see, I've passed the new props, named disabled, and used this in a SizeVariant Component.

You can logically disabled the input box,

<input type="radio" name="text" id={text} value={text} disabled={something ? true : false} />

In here something can be any condition from your array.

It depends on what information you have in the sizeList items:

1. If size list only gives you the available sizes then you need to create radio options for all possible sizes and only enable those that are present in the size list, something like

const allSizes = [
  { title: 'S', enabled: false },
  { title: 'M', enabled: false },
  { title: 'L', enabled: false },
]

const Component = () => {
  const sizes = useMemo(() => {
    return (sizeList || []).reduce((agg, item) => {
      agg[item.attribute_title].enabled = true
      return agg
    }, allSizes)
  }, [sizeList])

  return (
    <FlexBox alignItems="center" mb="16px">
      {sizes.map((item) => (
        <SizeVariant
          key={item.title}
          text={item.title}
          disabled={item.disabled}
          onClick={(e) => handlePrice(item)} // you might need to change this to match the new structure
        />
      ))}
    </FlexBox>
  )
}

const SizeVariant = ({ text, ...props }) => {

  return (
    <StyledSizeVariant {...props}>
      <input type="radio" name="text" disabled={props.disabled} id={text} value={text} />
      <label htmlFor={text}>{text}</label>
    </StyledSizeVariant>
  );
};

2. The sizeList contains all possible sizes with some property to tell if it is available or not. In this case you need to use that flag as the disabled props.

Hope this makes sense :)

Take a state and store the index no of the clicked radio button. Then compare the index no of other radio button with it if index doesn't match then you can disable those buttons.

import React from "react";
import styled from "styled-components";

const SizeVariant = ({ text, ...props }) => {

    const [buttonIndex, setButtonIndex] = useState();


  return (
    <StyledSizeVariant {...props}>
      <input onClick={()=>setButtonIndex(index)} disabled={buttonIndex  && buttonIndex == indexOfYourArry?false:true} type="radio" name="text" id={text} value={text} />
      <label htmlFor={text}>{text}</label>
    </StyledSizeVariant>
  );
};