Pokeball sphere in React Three Fiber

I am looking to create a pokeball and am new to react three fiber. I am using a gradient texture for red/white, but want to know how to make the colors more strict and not blur into one another. I know how to do it in plain css (with gradients), but confused on how to do so in react three fiber.

My code:

 <>
      <Canvas style={{ height: '10vh', width: '100%' }}>
        <ambientLight intensity={0.5} />
          <directionalLight
            position={[0,  10,  0]}
            intensity={1}
            castShadow/>
        <mesh position={[0,  0,  0]} castShadow receiveShadow>
          <sphereGeometry args={[1,  32,  32]} />
          <meshBasicMaterial>
        <GradientTexture
          stops={[0, 1]} 
          colors={['red', 'white']}
          size={1024} 
         />
    </meshBasicMaterial>
        </mesh>

      </Canvas>
    </>

Add additional stops around the middle, for an effect like this:

<GradientTexture
  stops={[0, 0.499, 0.5, 1]}
  colors={["red", "red", "white", "white"]}
  size={1024}
/>